Last active
January 17, 2016 10:41
-
-
Save anandthakker/69afa4bfb0c4f5778785 to your computer and use it in GitHub Desktop.
Hover styles with Mapbox GL
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.11.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #hover-map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='hover-map'></div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiZGV2c2VlZCIsImEiOiJnUi1mbkVvIn0.018aLhX0Mb0tdtaT2QNe2Q' | |
| var hoverStyle = { | |
| version: 8, | |
| name: 'Basic', | |
| sources: { | |
| 'states': { | |
| 'type': 'vector', | |
| 'url': 'mapbox://devseed.6qvmq8pf' | |
| } | |
| }, | |
| sprite: '', | |
| glyphs: '', | |
| layers: [{ | |
| id: 'background', | |
| type: 'background', | |
| paint: { 'background-color': '#5b6b6b' } | |
| }, { | |
| id: 'states', | |
| type: 'line', | |
| source: 'states', | |
| 'source-layer': 'US-States', | |
| interactive: true, | |
| paint: { 'line-color': '#314040' } | |
| }, { | |
| id: 'states-hover', | |
| type: 'fill', | |
| source: 'states', | |
| 'source-layer': 'US-States', | |
| paint: { 'fill-color': '#0b1a1a' }, | |
| filter: [ 'all', | |
| [ '==', 'GEOID10', 'NONE' ] // start with a filter that doesn't select anything | |
| ] | |
| }] | |
| } | |
| var hovermap = new mapboxgl.Map({ | |
| container: 'hover-map', | |
| style: hoverStyle, | |
| center: [-74.50, 40], | |
| zoom: 4, | |
| minZoom: 3, | |
| maxZoom: 8 | |
| }) | |
| hovermap.on('mousemove', function (e) { | |
| // query the map for the under the mouse | |
| hovermap.featuresAt(e.point, { radius: 5, includeGeometry: true }, function (err, features) { | |
| if (err) throw err | |
| console.log(e.point, features) | |
| var ids = features.map(function (feat) { return feat.properties.GEOID10 }) | |
| // set the filter on the hover style layer to only select the features | |
| // currently under the mouse | |
| hovermap.setFilter('states-hover', [ 'all', | |
| [ 'in', 'GEOID10' ].concat(ids) | |
| ]) | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment