Mapbox : GeoJson Source in Runtime Styling

Question

Do Mapbox Supports, GeoJson source support in Runtime Styling.

I tried same Style (file with two Source 1. Vector, 2. GeoJson) file with mapbox-gl-native and mapbox-gl-js.

It was working as expected in Native SDK but it seems mapbox-gl-js is ignoring if source type is GeoJson.

I tried version 0.52

riastrad riastrad · Accepted Answer · 2019-01-31T17:33:09

This is definitely possible. You just need to call .addSource on your map object before you use that source to generate the style layers. This example shows how the general flow for adding a GeoJson source: https://docs.mapbox.com/mapbox-gl-js/example/multiple-geometries/

If you're trying to reference a geojson file, you'll just need to specify that file's URL via the data field of your source object. If you're going that route, the GeoJson file needs to be on the same domain or accessible using CORS.

Here's a quick and dirty code snippet to illustrate what I mean:

map.on("load", function() {
    map.addSource("my-geojson-source", {
        "type": "geojson",
        "data": "path/to/data.geojson"
    });

    map.addLayer({
        "id": "styled-geojson-layer",
        "type": "circle", // this depends on your data & goals
        "source": "my-geojson-source",
        ... // add style things here
    });
});

If you get stuck, the library documentation should have everything you need:

Mapbox : GeoJson Source in Runtime Styling

1 Answers