Calculate center coordinates, zoom, and stops of the layer dynamically

Question

Below is my code to display a base map, set center coordinates and zoom level to show Ghana in view-port and also style/ color the ghana map for NDVI property of my source layer (mapbox hosted tileset) ghanaNDVILayer.

 mapID='myMapID';
    mapboxgl.accessToken = 'accessToken';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-1.41, 6.32],
        zoom: 5
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'main',
            'type': 'fill',
            'layout': {},
            'paint': {
                'fill-color': {
                  property: 'NDVI',
                    stops: [
                        [0, '#F2F12D'],
                        [1, '#EED322'],
                        [2, '#E6B71E'],
                        [3, '#DA9C20'],
                        [4, '#CA8323'],
                        [5, '#B86B25'],
                        [6, '#A25626'],
                        [7, '#8B4225'],
                        [8, '#723122']
                    ]
                },
                'fill-opacity': 0.8
            },
            'source': {
                'type': 'vector',
                'url': 'mapbox://' + mapID
            },
           "source-layer": "ghanaNDVILayer",
        });
    });

Now if you see in above code I've hard coded the center coordinates, zoom level and stops array which is typical for this Ghana NDVI trends example.

Now, this approach is fine when I am dealing with only one data source (in this case ghana data source) but I can't hard code these values as my data source could change and could be any region of the world and the property could also be anything other than NDVI.

I am using mapbox hosted tilesets as the data source, but I also have the original geoJson data source on my server.

Is there any way in Mapbox to calculate center, zoom and stops dynamically depending on the source we are loading?

The other approach I thought is to pass the tileset source Id to my server and locate the original geoJSON and using that calculate the center, zoom and stops on the server and then pass these values to my client and then render the map in the js.

Let me know what is the best way to calculate these values dynamically.

Steve Bennett Steve Bennett · Accepted Answer · 2017-03-05T22:27:41

Each map style in Mapbox Studio can have a center and zoom property. First, make sure yours does, by enabling "Lock default position":

It looks like:

{
"version":8,
"name":"svglines",
"metadata":{"mapbox:autocomposite":true},
"center":[-100.93913338752408,21.154227435559193],
"zoom":17.327947082278016,"bearing":0,"pitch":0,
"sources":{"composite":...

However this is not exposed through the MapboxGLJS API, and if you call map.getStyle(), these properties are not present.

However, if you access the style file directly (through the Styles API, rather than the Mapbox-GL-JS API), you can access these properties:

d3.json('https://api.mapbox.com/styles/v1/stevage/cinxfhzqs002nawma56kr6ww4?_=2&access_token=' + mapboxgl.accessToken, function(style) { 
  map.setCenter(style.center)
  //console.log(style.center); 
});

CodePen: http://codepen.io/stevebennett/pen/OpXezm

Calculate center coordinates, zoom, and stops of the layer dynamically

1 Answers