Whenever a marker is clicked on the map I need to show data of that marker in a div which outside of the map.
I am trying with Html Dom element.
map.on('click', 'places', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var title = e.features[0].properties.title;
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
var content = '<div><strong>' + feature.properties.title + '</strong>' +
'<p>' + feature.properties.description + '</p></div>';
info.innerHTML = content;
});
This where I need to show information in a table.
<div class="info" id="info" style="color: whitesmoke">
</div>
This is the map div
<div id="map">
</div>