Fetching external GeoJSON file for Mapbox Store Locator

Question

I recently followed the Mapbox Store Locator tutorial and built a simple "Upcoming Tour Dates" map for a touring artist I work for. It is working great, but I am looking for a way to more easily update the geoJSON points - I will be handing off the daily maintenance of the page to a co-worker and I want the map to be easy to add/remove points to. Currently, the geoJSON points are coded inline into the script, but it would be ideal if I could update a file via geojson.io or Mapbox data and it would automatically pull the new points into the map. The most data that will be on the map at any given time is ~100 single venues, no polygons or bounding boxes will be used.

This is how the script is currently getting its geoJSON points - the variable "stores" holds them all inline. I'm wondering the best way to be able to edit/add/remove geoJSON data in a CMS like Mapbox or geojson.io and have it dynamically update via a url in the script.

Forgive me if any of these is nonsensical - I am new to this! Thanks in advance for your help!

var stores = {

"type": "FeatureCollection",
"features": [
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -77.034084142948,
      38.909671288923
    ]
  },
  "properties": {
    "phoneFormatted": "(202) 234-7336",
    "phone": 2022347336,
    "address": "1471 P St NW",
    "city": "Washington DC",
    "country": "United States",
    "crossStreet": "at 15th St NW",
    "postalCode": 20005,
    "state": "D.C."
  }
}

map.on('load', function(e) {
    map.addSource("places", {
    "type": "geojson",
    "data": stores
});

Angelina Savchuk Angelina Savchuk · Accepted Answer · 2020-09-02T14:31:06

Took me two days to figure out the answer to this "looks-like simple" question.

you will need to include the D3 library in your script (change v3 to v6 - and it does not work and you have 1 day gone, like me) <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

fetch geojson data with d3.json()

 map.on('load', function() {
   // We use D3 to fetch the JSON here so that we can parse and use it separately
   // from GL JS's use in the added source. You can use any request method (library
   // or otherwise) that you want.
   d3.json(
     'PATH TO YOUR GEOJSON FILE',
     function(err, data) {
       if (err) throw err;
       map.addSource('stores', {
                 'type': 'geojson',
                 'data': data
           });

       map.addLayer({
           'id': 'stores',
           'type': 'circle',
           'source': 'stores',
           'paint': {
             'circle-radius': 6
           }
       });
       data.features.forEach(function(store, i){
         store.properties.id = i;
       });
       buildLocationList(data);

     });

});

Fetching external GeoJSON file for Mapbox Store Locator

2 Answers