Jump to a series of locations
Use the jumpTo
function to showcase multiple locations.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Jump to a series of locations</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 cities = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [100.507, 13.745]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [98.993, 18.793]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [99.838, 19.924]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [102.812, 17.408]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [100.458, 7.001]}},{'type': 'Feature','properties': {},'geometry': {'type': 'Point','coordinates': [100.905, 12.935]}}]}; const map = new nmapsgl.Map({container: 'map',style: 'Streets',center: [100.507, 13.745],zoom: 9}); map.on('load', () => {cities.features.forEach((city, index) => {setTimeout(() => {map.jumpTo({ center: city.geometry.coordinates });}, 2000 * index);});});</script> </body></html>