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 · Accepted Answer · 2019-01-31 17:33:09Z

2

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:

answered Jan 31, 2019 at 17:33

riastrad

1,78412 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akram Over a year ago

Yes this is happening via data driven styling, but i am trying to achieve using runtime styling . Adding two sources in style file.

riastrad Over a year ago

I'm not entirely sure what you mean by that. Are you able to share an MVCE that shows the problem?

Akram Over a year ago

I am preparing it. I will definitely share once ready. Thanks

Collectives™ on Stack Overflow

Mapbox : GeoJson Source in Runtime Styling

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related