Skip to content

Custom Mapbox

Jörn Lund edited this page Aug 17, 2024 · 1 revision
  1. Open your map in mapbox studio.

  2. Share
    grafik

  3. In the Modal Dialog choose "Developer Resources > Third Party". Make shure 'WMTS' is selected in the dorpdown and copy the URL.
    Bildschirmfoto 2024-08-17 um 09 33 34

  4. Open it in a browser. Find the XML Node named <ResourceUrl> and copy the template attribute. Value should be something like https://api.mapbox.com/styles/v1/podpirate/XXXX/tiles/{TileMatrix}/{TileCol}/{TileRow}?access_token=XXXX

  5. Replace strings like this {TileMatrix} => {z}, {TileCol} => {x}, {TileRow} => {y}. Result: https://api.mapbox.com/styles/v1/podpirate/XXXX/tiles/{z}/{x}/{y}?access_token=XXXX

  6. In PHP hook into acf_osm_leaflet_providers and add a new leaflet provider:

add_filter('acf_osm_leaflet_providers', function( $providers ) {
    $providers['MyMapbox'] = [
        'url' => 'https://api.mapbox.com/styles/v1/podpirate/XXXX/tiles/{z}/{x}/{y}?access_token=XXXX', // <== The result from step 5
        'options' => [
            'attribution' => '&copy; <a href="https://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> {attribution.OpenStreetMap} <a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>',
            'tileSize' => 512,
            'maxZoom' => 18,
            'zoomOffset' => -1,
        ],
    ];
} );
  1. Voilá, your Custom Mapbox style:
    grafik
Clone this wiki locally