MapBox GL JS et GeoJSON comme un fichier externe

Question

je code pour définir des marqueurs sur la carte MapBox

$(function() { 
    mapboxgl.accessToken = 'pk.###'; 

    var map = new mapboxgl.Map({ 
     container: 'map-global', 
     style: '..' 
    }); 

    var geojson = { 
     "type": "FeatureCollection", 
     "features": [ 
      { 
       "type": "Feature", 
       "properties": { 
        "title": "POI Title" 
       }, 
       "geometry": { 
        "type": "Point", 
        "coordinates": [0, 0] 
       } 
      } 
     ] 
    }; 

    geojson.features.forEach(function(marker) { 
     // create a HTML element for each feature 
     var el = document.createElement('div'); 
     el.className = 'marker'; 
     new mapboxgl.Marker(el) 
      .setLngLat(marker.geometry.coordinates) 
      .setPopup(new mapboxgl.Popup() 
      .setHTML(marker.properties.title)) 
      .addTo(map);   
    }); 
}); 

Et il fonctionne très bien. Mais je veux utiliser GeoJSON comme un fichier externe:

var geojson = 'file.geojson'; 

Et là, j'ai un problème - il ne fonctionne pas:

TypeError: undefined is not an object (evaluating '"map.geojson".features.forEach')".

Est-il possible d'utiliser un fichier GeoJSON externe avec commande HTML marqueurs?

Answer 1

Puisque vous utilisez Jquery, vous pouvez utiliser getJSON pour charger votre fichier:

Load JSON-encoded data from the server using a GET HTTP request.

Référence: http://api.jquery.com/jquery.getjson/

Exemple:

$.getJSON('file.geojson', function (geojson) { 
    geojson.features.forEach(function (marker) { 
     // etc 
    }); 
}); 

Answer 2

Vous pouvez charger des fichiers de GeoJSON externes avec plaine mapbox addSource().

map.on('load', function() { 
 
    var url = 'http://your_geojson_file.com/some_file.geojson'; 
 
    map.addSource('source_id', { type: 'geojson', data: url}); 
 
});

Voir cet exemple: https://www.mapbox.com/mapbox-gl-js/example/live-geojson/