Display a popup on hover
When a user hovers over a custom marker, show a Popup
containing more information.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Display a popup on hover</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.goongjs-popup {max-width: 400px;font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;}</style><div id="map"></div><script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [105.8344898123422, 21.03677130693113],zoom: 13}); map.on('load', function () {map.loadImage('https://docs.goong.io/assets/custom_marker.png',// Add an image to use as a custom markerfunction (error, image) {if (error) throw error;map.addImage('custom-marker', image); map.addSource('places', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {'description':'The President Ho Chi Minh Mausoleum is a mausoleum which serves as the resting place of Vietnamese Revolutionary leader & President Ho Chi Minh in Hanoi, Vietnam.'},'geometry': {'type': 'Point','coordinates': [105.8344898123422, 21.03677130693113]}}]}}); // Add a layer showing the places.map.addLayer({'id': 'places','type': 'symbol','source': 'places','layout': {'icon-image': 'custom-marker','icon-allow-overlap': true}});}); // Create a popup, but don't add it to the map yet.var popup = new goongjs.Popup({closeButton: false,closeOnClick: false}); map.on('mouseenter', 'places', function (e) {// Change the cursor style as a UI indicator.map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice();var description = e.features[0].properties.description; // Ensure that if the map is zoomed out such that multiple// copies of the feature are visible, the popup appears// over the copy being pointed to.while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;} // Populate the popup and set its coordinates// based on the feature found.popup.setLngLat(coordinates).setHTML(description).addTo(map);}); map.on('mouseleave', 'places', function () {map.getCanvas().style.cursor = '';popup.remove();});});</script> </body></html>