Chargement de données geojson dans Mapbox

Question

Je ne parviens pas à afficher mes données sur ma carte. Le fichier geojson est énorme, donc je le charge d'une source externe. Mon fichier index.html ressemble à ceci

<div id='map'></div> 
<script> 
mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw'; 
var map = new mapboxgl.Map({ 
    container: 'map', // container id 
    style: 'mapbox://styles/seandraadloze/cj1dcc3ho00f82smkvjxp4frb', //hosted style id 
    center: [24.530,-32.254], // starting position 
    zoom: 14.5 // starting zoom 
    }); 

    var url = 'http://bestersurveys.co.za/htmlsite/quintin.geojson'; 
    var source = new map.addSource()({ 
     data: url 
    }); 

    window.setInterval(function() { 
     source.setData(url); 
    }, 1000); 

    map.on('style.load', function() { 
     map.addSource("markers", source); 
     map.addLayer({ 
     "id": "markers", 
     "type": "circle", 
     "visibility": "visible", 
     "source": "markers", 
     "paint": { 
      "circle-radius": 0.2, 
      "circle-color": "#f3f3f3" 
     } 
     }); 
    }); 

    </script> 

    </body> 
    </html> 

Je reçois cette erreur de la console

map.js:895 Uncaught TypeError: Cannot read property 'addSource' of undefined 
    at new e.addSource (map.js:895) 
    at maptest.html:27 

Vous pouvez consulter la carte ici - http://bestersurveys.co.za/htmlsite/maptest.html

Quelqu'un peut-il me dire où je suis ça va mal?

Merci

Sean

Answer 1

my console now prints Uncaught Error: Style is not done loading

Déplacez votre map.addSource() appel dans le gestionnaire d'événements style.load (voir https://gis.stackexchange.com/questions/200733/mapbox-error-style-is-not-done-loading). En outre, vous appelez addSource incorrect (voir https://www.mapbox.com/mapbox-gl-js/api/#map#addsource).

mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw'; 
 

 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/seandraadloze/cj1dcc3ho00f82smkvjxp4frb', 
 
    center: [-71.059568, 42.360482], 
 
    zoom: 1 
 
}); 
 

 
map.on('style.load', function() { 
 
    map.addSource("sample", { 
 
    type: "geojson", 
 
    data: "https://raw.githubusercontent.com/chelm/grunt-geo/master/samples/postgis.geojson" 
 
    }); 
 
    // one layer per GeoJSON feature type, see http://stackoverflow.com/a/36927026 
 
    map.addLayer({ 
 
    "id": "sample-line", 
 
    "type": "line", 
 
    "source": "sample", 
 
    "filter": ["==", "$type", "LineString"], 
 
    "paint": { 
 
     "line-color": "white" 
 
    } 
 
    }); 
 
    map.addLayer({ 
 
    "id": "sample-point", 
 
    "type": "circle", 
 
    "source": "sample", 
 
    "filter": ["==", "$type", "Point"], 
 
    "paint": { 
 
     "circle-radius": 5, 
 
     "circle-color": "red" 
 
    } 
 
    }); 
 
});

#map { 
 
    width: 600px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.35.0/mapbox-gl.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.35.0/mapbox-gl.js"></script> 
 

 
<div id='map'></div>