0

I'm trying to make a map with mapbox with markers and popups. I have followed this tutorial : https://docs.mapbox.com/help/tutorials/add-points-pt-1/ to make it. Everything works perfectly except that in my popups the title and description are not recognized and undefined is returned. Here is my JavaScript code for the map :

function loadMap(){
            mapboxgl.accessToken = 'pk.eyJ1IjoibWludXRlZHJvbmUiLCJhIjoiY2s3MG1odjA4MDA0ZzNlbXJ5bjc1NnVuaCJ9.AanASXPAN4OBCBmeTALlPA';
            var map = new mapboxgl.Map({
            container: 'mapCarte', // container id
            style: 'mapbox://styles/minutedrone/ck70mem4a094n1intfzjpjsjv?optimize=true', // stylesheet location
            center: [2.859051, 47], // starting position [lng, lat]
            zoom: 5 // starting zoom
            });
            map.addControl(new mapboxgl.NavigationControl());
            map.on('click', function(e) {
                  var features = map.queryRenderedFeatures(e.point, {
                    layers: ['markers']
                  });

                  if (!features.length) {
                    return;
                  }

                  var feature = features[0];
                  var popup = new mapboxgl.Popup({ offset: 25 })
                    .setLngLat(feature.geometry.coordinates)
                    .setHTML('<h3 class="h3map">' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
                    .addTo(map);
                });
            map.on('mouseenter', 'markers', function() {
                map.getCanvas().style.cursor = 'pointer';
                });
            map.on('mouseleave', 'markers', function() {
                map.getCanvas().style.cursor = '';
                });
        }

And the result :

Result

This is the console log of the feature and my json. We can see that the informations are not the same while I did exactly the same as the tutorial.

{    ep {type: "Feature", _vectorTileFeature: ss, properties: {…}, id: 27, layer:{…}, …} geometry: Object type: "Feature" _vectorTileFeature: ss {properties: {…}, extent: 4096, type: 1, _pbf: Zs, _geometry: 65285, …} properties: __proto__: Object id: 27 layer: {id: "markers", type: "symbol", source: "composite", source-layer: "markers", layout: {…}} source: "composite"
sourceLayer: "markers" state: {} _geometry: {type: "Point", coordinates: Array(2)} __proto__: Object    }

Json code of a point :

{   "type": "Feature",  "properties": {    "title": "Brest","description":"<a>href='/formation/telepilote-drone-brest'>Accéder à la formation</a>"  },  "geometry": { "coordinates": [-4.497861,48.389469], "type": "Point"  }}
0

There is a missing quote in your json file > properties.description right before your < a > tag

| improve this answer | |

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.