5

Seem to be having problems adding a geojson featurecollection to Mapbox GL JS.

What is the most efficient way to accomplish this? I've looked through the examples given on their site but they involve only singular objects.

Edit: I've managed to display the geojson using the following code

map.on('style.load', function() {
map.addSource("tom", {
    "type": "geojson",
    "data": mappingStructure
});

map.addLayer({
    'id': 'foobar1',
    'type': 'line',
    'source': 'tom',
    'interactive': true
});
6
  • Is it a GeoJSON in a JavaScript file or is it an actual .geojson file? – BritishSteel Feb 24 '16 at 16:33
  • I have both to be honest. It's about 2mb worth of geojson. Wouldn't it be easier/neater to work with the file rather? – Zev Feb 24 '16 at 16:50
  • Is this still an issue? I can provide an answer, but you asked the question two years ago!\ – Alex Leith Feb 22 '18 at 20:38
  • @AlexLeith If its easy for you to answer I think you should so that the next person/people experiencing the same problem get an instant answer without needing to re-ask the same question. – PolyGeo Feb 23 '18 at 3:24
  • 1
    @AlexLeith If I recall correctly, the documentation at the time of posting was a little light and thus had to figure it out myself. I posted the answer in my edit in the above which worked. – Zev Feb 25 '18 at 8:29
3

MapBox GL JS has quite extensive documentation, and there's an example for adding a GeoJSON Polygon on there.

In your example, I think what was probably missing is the style information. This code should work:

map.on('load', function () {
    map.addSource("tom", {
      type: "geojson",
      data: mappingStructure
    })

    map.addLayer({
        'id': 'example',
        'type': 'fill',
        'source': "tom",
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.8
        }
    });
});
1
  • 2
    Unfortunately GL JS didn't have extensive documentation at the time, at least not pertaining to rendering. My answer in the above solved my issue. – Zev Feb 25 '18 at 8:30
0

Perhaps this might be stating the obvious,but have you tried adding the geojson file as a vectorized file in https://www.mapbox.com/studio/tilesets/ ? This method (vector tile format) is easy and rather fast.

This might serve best as background static layer that you can upload and store ex) https://www.mapbox.com/mapbox-gl-js/example/vector-source/.

When you are saying 'easier' , do you mean faster or file size?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.