Skip to content

Instantly share code, notes, and snippets.

@mrwweb

mrwweb/index.html

Last active January 25, 2018 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrwweb/b2e7a9a794c0dec3f4354a1231de0b2d to your computer and use it in GitHub Desktop.
Save mrwweb/b2e7a9a794c0dec3f4354a1231de0b2d to your computer and use it in GitHub Desktop.
Download ZIP
Testing mapbox-gl.js upgrade
Raw
index.html
<!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>
Display the source blob
Display the rendered blob
Raw
trailheads2.geojson
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