In Mapbox GL JS, can you pass coordinates to an external GeoJSON data source?

Question

Can you pass coordinate values as variables when trying to retreive an external GeoJSON data source? Ideally I'd like to pass something like this, but it doesn't work for me.

map.addSource('geojsonpoints', {
    type: "geojson",
    data: 'http://myexample.com/pins?lat={lat}&lon={long}'
  });

I am able to pass Z, X, Y coordinates if I use Map Vector Tiles (mvt) as a source. i.e. This works:

  map.addSource('mapvectortiles', {
    'type': 'vector',
    'tiles': ['http://myexample.com/{z}/{x}/{y}'],

But I haven't figured out how to do it for a GeoJSON source. Anyone have any ideas if it is possible in n Mapbox GL JS?

FYI, I am able to generate the URL using the method below, but the problem is it doesn't refresh when I move the map, unlike vector tiles.

var lng = map.getCenter().lng
var lat = map.getCenter().lat
var url = 'http://myexample.com/pins?lat='+lat+'&lon='+lng
map.addSource('EPC', {
  type: "geojson",
  data: url
});

score 0 · Answer 1 · answered Jan 30 '23 at 13:01

I use GeoJSON to draw Tiles on the map

this is a sample GeoJSON:

    { "type": "FeatureCollection", 
  "features": [
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [ 
            [4.342254780676343, 50.89533552689166], 
            [4.342254780676343, 50.89443721160754], 
            [4.340830581474948, 50.89443721160754],
            [4.340830581474948, 50.89533552689166],
            [4.342254780676343, 50.89533552689166]
         ]
        ]
      },
      "properties": {}
    }    
  ]
}

after all you have to add the source and add the layer

add Source:

const sourceJson: GeoJSONSourceRaw = {
        type: 'geojson',
        data: data as FeatureCollection
    };
    map.addSource(sourceId, sourceJson)

data is your json file

add Layer:

 const layer: FillLayer =  {
        id: sourceId,
        source: sourceId,
        type: 'fill',
        paint: {
            'fill-color': color,
            'fill-opacity': opacity 
        }
    }
        
    this.map.addLayer(layer);

score 0 · Answer 2 · answered Feb 02 '23 at 05:33

There are two parts to your question:

Update the data source when the map is moved
Use the map's extent as part of the GeoJSON source's URL.

You have part 2 under control, so:

Update the data source when the map is moved

Use map.on('moveend', ...
Use map.getSource(...).setData(...)

In Mapbox GL JS, can you pass coordinates to an external GeoJSON data source?

2 Answers2

Update the data source when the map is moved