Skip to content

Instantly share code, notes, and snippets.

@anandthakker
Last active January 17, 2016 10:41
Show Gist options
  • Save anandthakker/69afa4bfb0c4f5778785 to your computer and use it in GitHub Desktop.
Save anandthakker/69afa4bfb0c4f5778785 to your computer and use it in GitHub Desktop.
Hover styles with Mapbox GL
<!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