Center the map on a clicked feature
Use events and flyTo
to center the map on a circle
layer.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Center the map on a clicked feature</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.js"></script><link href="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.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> // TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN nmapsgl.accessToken = '<your access token here>'; const map = new nmapsgl.Map({container: 'map',style: 'Streets',center: [-90.96, -0.47],zoom: 7.5}); map.on('load', () => {// Add a GeoJSON source with 3 points.map.addSource('points', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-91.3952, -0.9145]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-90.3295, -0.6344]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [-91.3403, 0.0164]}}]}});// Add a circle layermap.addLayer({'id': 'circle','type': 'circle','source': 'points','paint': {'circle-color': '#4264fb','circle-radius': 8,'circle-stroke-width': 2,'circle-stroke-color': '#ffffff'}}); // Center the map on the coordinates of any clicked circle from the 'circle' layer.map.on('click', 'circle', (e) => {map.flyTo({center: e.features[0].geometry.coordinates});}); // Change the cursor to a pointer when the it enters a feature in the 'circle' layer.map.on('mouseenter', 'circle', () => {map.getCanvas().style.cursor = 'pointer';}); // Change it back to a pointer when it leaves.map.on('mouseleave', 'circle', () => {map.getCanvas().style.cursor = '';});});</script> </body></html>