1

I want to show data points on my mapbox gl, but i get the error 'style.js:261 Uncaught Error: Style is not done loading'. Here is a piece of my code.

I've tried to use the callback function map.on('load',function(){...}) but i just get a load of errors then. I'm really stuck here. Btw the datapoints were showing in previous codes where i didn't used the mapbox gl package. I used othere map tiles here. so normally the code to retrieve and show the datapoints should be fine. Except maybe the .addTo(map) function if it is not working on mapboxgl maps. Here's a piece of my code.

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/traffic-night-v2',
    center: [ 4.7005176, 50.8798438],
    zoom: 13,
    hash: true
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new MapboxTraffic());
        d3.json("lastMesuraments.json", function(data) {
            data.forEach(function(d) {
                console.log(d.id);
                d.lat = +d.lat;
                d.lon = +d.lon;
                console.log(d.lat);
                console.log(d.lon);
                //L.marker([d.lat, d.lon], {icon: greenIcon}).addTo(mymap);
                var circle = L.circle([d.lat, d.lon], {
                    color: colorPick(d.temperature),
                    fillColor: colorPick(d.temperature),
                    fillOpacity: 0.7,
                    radius: 120,
                    stroke: false
                }).addTo(map);
                circle.bindPopup("temperature:" + d.temperature + "°C");
            });

        })

The result should be a map where i can see my datapoints.

Tilou
  • 59
  • 6
  • Did you try to wait for the map to completely load before adding stuff to it? You can find more on this thread: https://stackoverflow.com/questions/40557070/style-is-not-done-loading-mapbox-gl-js – Samuel Vaillant Feb 13 '19 at 11:45
  • i tried to yeah but id didn't seem to work. How should i implement the on('load') function in this case? – Tilou Feb 13 '19 at 12:02
  • From what I understand you've mix the API of MapboxGL with the one of the legacy Mapbox.js version that uses Leaflet. This call to `L.circle` is not available with Mapbox GL. Here is an example from their website to create points. https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/ – Samuel Vaillant Feb 13 '19 at 12:30
  • I don't see how i can implement it using my own data set, do you know how? thanks for the help man! – Tilou Feb 13 '19 at 13:00

0 Answers0