Search code examples
mapboxgeojsonmapbox-glmapbox-gl-js

Large GeoJSON not working w/ MapBox GL


I've got MapBox GL JS setup, but it won't load a large (~75MB) GeoJSON file. The console does not throw any errors, but nothing shows up on the map. The file that does not work is located here.

The script has no issues with smaller files such as this one. It loads properly and gets highlighted.

My code is simple (and works with smaller datasets):

map.addSource('plutodata', {
        type: 'geojson',
        data: 'http://173.254.28.39/~keggera1/ReoGeo/data/MNMapPLUTO.geojson'
    });

map.addLayer({
       id: 'pluto-fills',
       type: 'fill',
       source: 'plutodata',
       layout: {},
       paint: {
         'fill-color': '#627BC1',
         'fill-opacity': 0.5
       }
    });

I don't detect anything wrong with the geojson encoding and I can't find any size limitations in the MapBox documentation.

Does anyone know what could be causing this?


Solution

  • This is a data issue: if you look at the source of the smaller file, pluto.geojson, you'll see:

    [-74.002537,40.733446],[-74.002543,40.733446],[-74.002547,40.733446],
    

    These are longitude, latitude coordinates, as required by the GeoJSON standard. If you look at MNMapPLUTO.geojson

    [[[997277.2344000041,221816.0936000049],[997300.0160000026,221803.44499999285],[997288.5119999945,221782.6930000037],[997286.4176000059,221778.9143999964],[997197.0333999991,221828.3980000019]
    

    These coordinates are far outside of the longitude, latitude range. You'll need to project this data into the WGS84 datum (longitude, latitude units) in order for it to be valid GeoJSON and to show up on the map.