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.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>var 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]}}]}; goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [100.507, 13.745],zoom: 9}); map.on('load', function () {cities.features.forEach(function (city, index) {setTimeout(function () {map.jumpTo({ center: city.geometry.coordinates });}, 2000 * index);});});</script> </body></html>