Search code examples
javascriptmapboxmapbox-glmapbox-marker

Mapbox GL - how to setup common style for complex popups


I have a Mapbox GL map with numerous markers. On hover, complex popups should be displayed. My problem is - I dont want to copy this complex code to the description of each marker. Ideally, I would like to setup the style in "layout" section and only call parameters. I am already using this approach with the icon marker. Problem is that I dont know what is the name of the parameter in layout section affecting text of the popup - could somebody help me with that? For better understanding, I attach piece of my code - usage of parameter can be seen for icon-image for the layout section

 map.addLayer({
                "id": "places",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.702117, 42.395926]
                            }
                        }, {
                            "type": "Feature",
                            "properties": {
                                "description": "<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>From Omalo to the Diklo fortress</em><br><br>Duration: </strong>4 hours<br><strong>Difficulty: </strong>Easy<br>blabla</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"OmaloDiklo_pr.jpg \" /></div>",
                                "icon": "yellow"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [45.634342, 42.36961]
                            }
                        }]
                    }
                },
                "layout": {
                    "icon-image": "marker-{icon}",
                    "icon-allow-overlap": true,
                    "icon-size": 0.3,
                    "icon-offset": [0, -8],                        
                }

Solution

  • Solved. There was no special property in layout, but it was possible to generate string manually and then pass is to the SetHtml function. Something like this...

    map.on('mousemove', function (e) {
            var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
            // Change the cursor style as a UI indicator.
            map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    
            if (!features.length) {
                popup.remove();
                return;
            }
    
            var feature = features[0];
            var popupHtml = '<div class=\"mapbox_popisok\"><div class=\"trek_caption_header\"><strong><em>' + feature.properties.trekname + '</em><br><br>Duration: </strong>' + feature.properties.duration + '<br><strong>Difficulty: </strong>' + feature.properties.difficulty + '<br>' + feature.properties.description + '</div><div class=\"mapbox_wrapper\"></div><img class=\"obraztek\" src=\"../../Images/Thumbnails/Treks/nahlad/' + feature.properties.imagepath + ' \" /></div>';
            // Populate the popup and set its coordinates
            // based on the feature found.
            popup.setLngLat(feature.geometry.coordinates)
                .setHTML(popupHtml)
                .addTo(map);            
        })