URGENT: Help needed getting large GeoJSON file to render using Mapbox
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi!

I'm under deadline, and am having trouble getting this GeoJSON file to render using the raw geojson source with Mapbox GL JS. It appears that I'll need to load the file via URL to the source. Following the instructions here, I used RawGit to get a URL to the GeoJSON source, but it keeps rendering errors.

Can anyone quickly figure this out? I'm able to load a small GeoJSON polygon like this.

DEADLINE; 2 HOURS FROM NOW

Can you provide the access token?
Stefano Balzarotti 2 months ago
pk.eyJ1IjoiY3ZsZXdpcyIsImEiOiJ5Y0tiaUZnIn0.lIo2eLdx98qOdZawlivG8A
paragon21 2 months ago
awarded to dekkard

Crowdsource coding tasks.

1 Solution

Winning solution

Hello,
please try this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>Add a GeoJSON polygon</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>

    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoidW5jb25kaXRpb25hbCIsImEiOiJjamg2cWJsaTgwMDE4MnFvbnB5ZXhxYmJoIn0.hCYaOn9247F8KRmmLrs_4Q';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-68.13734351262877, 45.137451890638886],
        zoom: 5
    });



    map.on('load', function () {

        map.addSource('scmpd-precinct-polygons', {
          type: 'geojson',
          data: 'https://cdn.rawgit.com/carlvlewis/02631ee66f172936c454a4a1e12c5eff/raw/7c3c1a15645b0d5ac7f65216ee61c896b872179f/scmpd-precinct-polygons.geojson'
        });

        map.addLayer({
            'id': 'precinct-layer',
            'type': 'fill',
            'source': 'scmpd-precinct-polygons',
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8
            }
        });
    });
    </script>

    </body>
    </html>

Worked for me.

Here's a JSFiddle for your convenience.

Scroll all the way to Savannah/Georgia to see your data drawn.