Solución:
Si desea ajustar el mapa a los marcadores, puede crear límites que contengan todos los marcadores.
var bounds = new mapboxgl.LngLatBounds();
markers.features.forEach(function(feature) {
bounds.extend(feature.geometry.coordinates);
});
map.fitBounds(bounds);
Para obtener una solución que funcione para todos los objetos GeoJSON, no solo un conjunto de marcadores, consulte Turf.js. de Mapbox.
Este código fue muy útil para mí: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792
Pero solo para repetir lo básico en caso de que ese enlace muera:
var bounds = turf.bbox(markers);
map.fitBounds(bounds, {padding: 20});
los extent El método mencionado en el código vinculado ha quedado obsoleto en favor de bbox, Pero el resultado es el mismo.
El complemento de extensión geojson de Mapbox hará el truco. Asumiendo tu markers El objeto es GeoJSON válido, simplemente puede pasarlo al geojsonExtent() función para obtener un conjunto de límites que luego puede pasar a fitBounds().
Una vez que cargue el archivo geojson-extension.js (por ejemplo, usando un <script> etiqueta en su código HTML), debería poder hacer esto para ajustar su mapa a los límites de su GeoJSON markers objeto:
map.fitBounds(geojsonExtent(markers));
ACTUALIZAR
GeoJSONLint informa que su markers El objeto no es GeoJSON válido porque los elementos en cada posición se interpretan como cadenas, no como números. Si elimina las comillas de las coordenadas lon-lat, debería funcionar bien:
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
]
}
}
]
};