Using featuresAt, flyTo, setHtml, and others to make markers clickable and use their properties to populate popups.
Last active
March 11, 2023 16:34
Clickable markers with popup content from GeoJSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' /> | |
| <script src='parks.js'></script> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v8', | |
| center: [-95.24027322474723, 38.95159220654659], | |
| zoom: 11 | |
| }); | |
| map.on('style.load', function () { | |
| map.addSource("markers", { | |
| "type": "geojson", | |
| "data": parks | |
| }); | |
| map.addLayer({ | |
| "id": "markers", | |
| "interactive": true, | |
| "type": "symbol", | |
| "source": "markers", | |
| "layout": { | |
| "icon-image": "park-15", | |
| "icon-size": 1.25 | |
| }, | |
| "paint": { | |
| /*"text-size": 10,*/ | |
| } | |
| }); | |
| }); | |
| map.on('click', function (e) { | |
| // Use featuresAt to get features within a given radius of the click event | |
| // Use layer option to avoid getting results from other layers | |
| map.featuresAt(e.point, {layer: 'markers', radius: 10, includeGeometry: true}, function (err, features) { | |
| if (err) throw err; | |
| // if there are features within the given radius of the click event, | |
| // fly to the location of the click event | |
| if (features.length) { | |
| // Get coordinates from the symbol and center the map on those coordinates | |
| map.flyTo({center: features[0].geometry.coordinates}); | |
| var featureName = features[0].properties.name; | |
| var tooltip = new mapboxgl.Popup() | |
| .setLngLat(e.lngLat) | |
| .setHTML('<p>' + featureName + '</p>') | |
| .addTo(map); | |
| } | |
| }); | |
| }); | |
| // Use the same approach as above to indicate that the symbols are clickable | |
| // by changing the cursor style to 'pointer'. | |
| map.on('mousemove', function (e) { | |
| map.featuresAt(e.point, {layer: 'markers', radius: 10}, function (err, features) { | |
| if (err) throw err; | |
| map.getCanvas().style.cursor = features.length ? 'pointer' : ''; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var parks = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"south park"},"geometry":{"type":"Point","coordinates":[-95.2358865737915,38.96194491354418]}},{"type":"Feature","properties":{"name":"Buford M Watson, Jr. Park"},"geometry":{"type":"Point","coordinates":[-95.23893356323242,38.97148792405487]}},{"type":"Feature","properties":{"name":"Centennial Park"},"geometry":{"type":"Point","coordinates":[-95.26292324066162,38.969919755358]}},{"type":"Feature","properties":{"name":"Naismith Valley Park"},"geometry":{"type":"Point","coordinates":[-95.25189399719238,38.93564493366085]}},{"type":"Feature","properties":{"name":"Prairie Park"},"geometry":{"type":"Point","coordinates":[-95.21472930908203,38.93190607345723]}},{"type":"Feature","properties":{"name":"Holcom Park"},"geometry":{"type":"Point","coordinates":[-95.26777267456055,38.93698019310818]}},{"type":"Feature","properties":{"name":"Dad Perry Park"},"geometry":{"type":"Point","coordinates":[-95.28579711914062,38.962345345418036]}},{"type":"Feature","properties":{"name":"Lawrence Nature Park"},"geometry":{"type":"Point","coordinates":[-95.3034782409668,38.988368562404126]}},{"type":"Feature","properties":{"name":"Clinton State Park"},"geometry":{"type":"Point","coordinates":[-95.36819458007811,38.93604551413491]}},{"type":"Feature","properties":{"name":"Woodridge Primitive Park"},"geometry":{"type":"Point","coordinates":[-95.4269027709961,38.93257374152105]}},{"type":"Feature","properties":{"name":"Bloomington Public Use Area"},"geometry":{"type":"Point","coordinates":[-95.38321495056152,38.914444322537314]}}]}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment