Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Last active Jan 25, 2018
Embed
What would you like to do?
Testing mapbox-gl.js upgrade
<!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.44.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.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>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mal-wood/cjb6u2oza1t5y2so6hw2dboco',
center: [-120.91742004345062, 47.334836573775306],
zoom: 9
});
map.on('load', function() {
map.addSource("earthquakes", {
type: "geojson",
data: "./trailheads2.geojson",
cluster: true,
clusterMaxZoom: 8, // Max zoom at which to use clustering at all
clusterRadius: 35 // Proximity within which to include 2 points in a cluster
});
map.addLayer({
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["has", "point_count"],
paint: {
"circle-color": '#51bbd6',
"circle-radius": {
property: "point_count",
type: "interval",
stops: [
//[0, 20],
[100, 30],
[750, 40]
]
}
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "earthquakes",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "symbol",
filter: ["!has", "point_count"],
source: "earthquakes",
layout: {
"icon-image": "marker-editor",
"icon-size": 1,
"icon-ignore-placement": true
}
});
map.addLayer({
id: "unclustered-point-hover",
type: "symbol",
filter: ["==", "uid", ""],
source: "earthquakes",
layout: {
"icon-image": "marker-editor-2",
"icon-size": 1,
"icon-ignore-placement": true
}
});
map.on('mouseenter', 'unclustered-point', function(e){
map.setFilter('unclustered-point-hover', ['==', 'uid', e.features[0].properties.uid])
})
map.on('mouseleave', 'unclustered-point', function(e){
map.setFilter('unclustered-point-hover', ['==', 'uid', ''])
})
});
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment