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],
}
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);
})