Last active
January 16, 2017 11:24
-
-
Save mikelmaron/f56124cee56a953fd924e285ccacf388 to your computer and use it in GitHub Desktop.
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.31.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <style> | |
| .mapboxgl-popup { | |
| max-width: 400px; | |
| font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; | |
| } | |
| </style> | |
| <div id='map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoibWlrZWxtYXJvbiIsImEiOiJjaWZlY25lZGQ2cTJjc2trbmdiZDdjYjllIn0.Wx1n0X7aeCQyDTnK6_mrGw'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mikelmaron/cixzz373l003x2sozl45xeiga', | |
| center: [36.7878, -1.3121], | |
| zoom: 14.5 | |
| }); | |
| map.on('load', function() { | |
| }); | |
| // Create a popup, but don't add it to the map yet. | |
| var popup = new mapboxgl.Popup({ | |
| closeButton: false, | |
| closeOnClick: false | |
| }); | |
| map.on('mousemove', function(e) { | |
| var features = map.queryRenderedFeatures(e.point, { layers: ['school-affected-by-the-new-ro-bulrqq'] }); | |
| // Change the cursor style as a UI indicator. | |
| map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; | |
| if (!features.length) { | |
| popup.remove(); | |
| return; | |
| } | |
| var feature = features[0]; | |
| // Populate the popup and set its coordinates | |
| // based on the feature found. | |
| popup.setLngLat(feature.geometry.coordinates) | |
| .setHTML(feature.properties.name) | |
| .addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment