Center the map on a clicked symbol
Use events and flyTo
to center the map on a symbol
.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Center the map on a clicked symbol</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><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: [-90.96, -0.47],zoom: 7.5}); map.on('load', function () {// Add an image to use as a custom markermap.loadImage('https://docs.goong.io/assets/custom_marker.png',function (error, image) {if (error) throw error;map.addImage('custom-marker', image);// Add a GeoJSON source with 3 points.map.addSource('points', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-91.395263671875, -0.9145729757782163]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-90.32958984375, -0.6344474832838974]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-91.34033203125, 0.01647949196029245]}}]}}); // Add a symbol layermap.addLayer({'id': 'symbols','type': 'symbol','source': 'points','layout': {'icon-image': 'custom-marker'}});}); // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.map.on('click', 'symbols', function (e) {map.flyTo({center: e.features[0].geometry.coordinates});}); // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.map.on('mouseenter', 'symbols', function () {map.getCanvas().style.cursor = 'pointer';}); // Change it back to a pointer when it leaves.map.on('mouseleave', 'symbols', function () {map.getCanvas().style.cursor = '';});});</script> </body></html>