Mapbox GL JS getBounds()/fitBounds()

react-map-gl fitbounds
mapbox fitbounds
mapbox js
mapboxgl marker
mapboxgl popup
mapbox geolocatecontrol
leaflet fitbounds
mapbox remove layer

I'm using Mapbox GL JS v0.14.2 and I've searched high and low through the documentation and very little is clear about this.

If you use the standard JS API, it's very clear to 'fit map to markers' using an example they have provided (https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/); however the setup when using the GL api is quite different. The GL API has getBounds() (https://www.mapbox.com/mapbox-gl-js/api/#Map.getBounds) but because you don't have a named layer, like the standard JS API, so I'm struggling to work out how to use getBounds() at all.

I've found this (Mapbox GL JS API Set Bounds) but surely can't be the right answer?

This is the bulk of my setup; excluding JSON setup and other options.

mapboxgl.accessToken = '<myaccesstoken>';

var markers = <?php echo $programme_json; ?>;

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/richgc/cikyo5bse00nqb0lxebkfn2bm',
    center: [-1.470085, 53.381129],
    zoom: 15
});

map.on('style.load', function() {
    map.addSource('markers', {
        'type': 'geojson',
        'data': markers
    });

    map.addLayer({
        "id": "markers",
        "interactive": true,
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "venue-map-icon-blue",
            'icon-size': 0.5,
            "icon-allow-overlap": true
        }
    });

    map.scrollZoom.disable();

});

I have tried the following:

alert(map.getBounds()); // LngLatBounds(LngLat(-1.4855345239256508, 53.37642500812015), LngLat(-1.4546354760740883, 53.38583247227842))
var bounds = [[-1.4855345239256508, 53.37642500812015],[-1.4546354760740883, 53.38583247227842]]
map.fitBounds(bounds);

So I know how to fitBounds, but I'm unsure how to get them map.getBounds() just seems to return the set centre position lng/lat.

Markers JSON:

var markers = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"Site Gallery","url":"\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/","summary":"Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.","image":"\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg","marker-symbol":"venue-map-icon-blue","colour":"blue"},"geometry":{"type":"Point","coordinates":["-1.466439","53.376842"]}},{"type":"Feature","properties":{"title":"Moore Street Substation","url":"\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/","summary":"","image":null,"marker-symbol":"venue-map-icon-green","colour":"green"},"geometry":{"type":"Point","coordinates":["-1.477881","53.374798"]}},{"type":"Feature","properties":{"title":"S1 Artspace","url":"\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/","summary":"","image":null,"marker-symbol":"venue-map-icon-red","colour":"red"},"geometry":{"type":"Point","coordinates":["-1.459620","53.380562"]}}]};

If you want to fit map to markers, you can create bounds that contains all markers.

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);

Fit a map to a bounding box | Mapbox GL JS, Use fitBounds to show a specific area of the map in view, regardless of the pixel size of the map. Use fitBounds to show a specific area of the map in view, regardless of the pixel size of the map.

For a solution that will work for all GeoJSON objects, not just a set of markers, check out Mapbox's Turf.js.

This code was very helpful to me: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

But just to repeat the basics in case that link dies:

var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});

The extent method mentioned in the linked code has been deprecated in favour of bbox, but the result is the same.

Fit to the bounds of a LineString | Mapbox GL JS, <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="​stylesheet" />. <style>. body { margin: 0; padding: 0; }. #map { position: absolute  Automatically fit your data on your map with fitBounds with Mapbox.js, Mapbox GL JS. Mapbox Studio map contains these. map. fitBounds (featureLayer. getBounds

Mapbox's own geojson-extent plugin will do the trick. Assuming your markers object is valid GeoJSON, you can simply pass it to the geojsonExtent() function to get a set of bounds that you can then pass to fitBounds().

Once you load the geojson-extent.js file (e.g., by using a <script> tag in your HTML code), you should be able to do this to fit your map to the bounds of your GeoJSON markers object:

map.fitBounds(geojsonExtent(markers));

UPDATE

GeoJSONLint reports that your markers object is not valid GeoJSON because the elements in each position are being interpreted as strings, not numbers. If you remove the quotes from the lon-lat coordinates, it should work fine:

var markers = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "Site Gallery",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/site-gallery\/",
        "summary": "Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Donec id justo. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Suspendisse feugiat. Etiam rhoncus.",
        "image": "\/Freelance\/art-sheffield-2016\/site\/assets\/files\/1032\/site_gallery.jpg",
        "marker-symbol": "venue-map-icon-blue",
        "colour": "blue"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.466439,
          53.376842
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Moore Street Substation",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/moore-street-substation\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-green",
        "colour": "green"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.477881,
          53.374798
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "S1 Artspace",
        "url": "\/Freelance\/art-sheffield-2016\/programme\/s1-artspace\/",
        "summary": "",
        "image": null,
        "marker-symbol": "venue-map-icon-red",
        "colour": "red"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.459620,
          53.380562
        ]
      }
    }
  ]
};

Issue #4846 · mapbox/mapbox-gl-js, Any later calls subsequent fitBounds() works correctly and consistently correctly. If I increase the padding from 24 to 36 the zoom in is worse. If I  Before fitBounds can be subsumed by the *to () methods, the padding camera option needs to be ported from mapbox/mapbox-gl-native#3583..getBoundsZoom () is a somewhat confusing name, since it wouldn't get the current bounds or zoom level. How about.toCameraOptions ()? jfirebaugh mentioned this issue on Jan 26, 2016

This is my solution based on the reduce operation from a Mapbox example.

It works for geojson that contain point features and multi-point features like lines.

let bounds = geoJSON.features.reduce(function(bounds, feature) {
  if(!Array.isArray(feature.geometry.coordinates[0])) { // point feature
    return bounds.extend(feature.geometry.coordinates);
  } else {
    return feature.geometry.coordinates.reduce(function(bounds, coord) {
      return bounds.extend(coord);
    }, bounds);
  }
}, new mapboxgl.LngLatBounds());

map.fitBounds(bounds, {
  maxZoom: 12,
  padding: 30, // in px, to make markers on the top edge visible
})

javascript - Mapbox GL JS getBounds()/fitBounds(), Nếu bạn muốn để phù hợp với bản đồ để đánh dấu, bạn có thể tạo giới hạn có chứa tất cả các dấu hiệu. var bounds = new mapboxgl.LngLatBounds();  In Mapbox JS, I would do this by loading the GeoJSON data into a featureLayer and then fitting the map to its bounds with: map.fitBounds(featureLayer.getBounds()); The fitBounds documentation for Mapbox GL JS indicates that it wants the bounds in the format of [[minLng, minLat], [maxLng, maxLat]].

If anyone here is using React-Map-GL, has more than two markers, and wants to figure out the bounds before loading the map and retrieving the Mapbox instance you can do this:

const lat = myCoordinatesArray.map(location => parseFloat(location.lat));
const lng = myCoordinatesArray.map(location => parseFloat(location.lng));

// Note that WebMercatorViewport requires this format [lng, lat]
const minCoords = [Math.min.apply(null, lng), Math.min.apply(null, lat)];
const maxCoords = [Math.max.apply(null, lng), Math.max.apply(null, lat)];
const formattedGeoData = [minCoords, maxCoords];

const vPort = new WebMercatorViewport(this.state.viewport).fitBounds(formattedGeoData, {
  padding: 100
});

const { latitude, longitude, zoom } = vPort;

Src: https://stackoverflow.com/a/40506115/1259863

You can do all this in the constructor way before the render function and get your values for the plugin init.

javascript - Mapbox GL JS getBounds()/fitBounds(), Mapbox GL JS getBounds()/fitBounds(). Je suis en utilisant Mapbox GL JS v0.​14.2 et j'ai cherché haut et bas grâce à la documentation et très peu est clair à ce​  Fit to the bounds of a LineString Get the bounds of a LineString by passing its first coordinates to LngLatBounds and chaining extend to include the last coordinates.

For strict CSP environments without worker-src blob: ; child-src blob: enabled, there's a separate Mapbox GL JS bundle (mapbox-gl-csp.js and mapbox-gl-csp-worker.js) which requires setting the path to the worker manually: <

The Mapbox Vision SDK describes every curb, lane, street sign, and road hazard it sees as data. Developers use the SDK's AI-powered semantic segmentation, object detection, and classification to deliver precise navigation guidance, display driver assistance alerts, and detect and map road incidents.

Polyline. A class for drawing polyline overlays on a map. Extends Path.Use Map#addLayer to add it to the map.. Usage example // create a red polyline from an arrays of LatLng points var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map); // zoom the map to the polyline map.fitBounds(polyline.getBounds());

Comments
  • "map.getBounds() just seems to return the set centre position lng/lat" Isn't it returning the lower-left and upper-right coordinates of your bounding box?
  • This works! Is there anyway I can add padding to this?
  • Got padding to work with: map.fitBounds(bounds, { padding: '100' });
  • Just be aware, that fitBounds won't work with a single lat/long - so if you've only got one marker, your bounds object won't be useful (which does make sense).
  • @JohnthePainter padding should be a number. I.e. map.fitBounds(bounds, { padding: 100 });
  • The padding option wants an integer, not a string so go with: map.fitBounds(bounds, { padding: 100 });
  • Thanks for the help. I get this error in my console Uncaught Error: Invalid LngLat object: (NaN, 1) – I do believe that it is valid geoJSON as the map is working BUT I guess markers is returning more than just coordinates so perhaps I need to pass just the coordinates into the geojsonExtent.
  • And based on this example (mapbox.com/mapbox.js/example/v1.0.0/…) which uses the static map and not the GL JS map, it seems my geoJSON is valid.
  • how do I do this if I'm building my GeoJson as map.on('load', function() { map.addSource('points', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { etc