Skip to content

Instantly share code, notes, and snippets.

@drdrsh

drdrsh/index.html

Last active February 25, 2019 16:41
Show Gist options
  • Save drdrsh/4419e4f616fdd94f5631aaedb4524d5a to your computer and use it in GitHub Desktop.
Save drdrsh/4419e4f616fdd94f5631aaedb4524d5a to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox selective cluster icon
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create and style clusters</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.53.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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>
const data = { "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [110.0, 0.5]},
"properties": {"type": "event"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [105.0, 0.5]},
"properties": {"type": "event"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [95.0, 0.5]},
"properties": {"type": "scholar"}
},
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [90.0, 0.5]},
"properties": {"type": "scholar"}
},
]
};
mapboxgl.accessToken = 'pk.eyJ1IjoiaW5zdGFjYXJ0IiwiYSI6ImZFMGJsVncifQ.a8WhVVE-IBJlcgJtr1QNOA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [100.0, 0.5],
zoom: 3
});
function addImages(map, images) {
const addImage = (map, id, url) => {
return new Promise((resolve, reject) => {
map.loadImage(url, (error, image) => {
if(error) {
reject(error);
return;
}
map.addImage(id, image);
resolve(image);
});
});
}
const promises = images.map( imageData => addImage(map, imageData.id, imageData.url) );
return Promise.all(promises);
}
map.on('load', function() {
addImages(map, [
{url: "icons/scholar.png", id: 'scholar'},
{url: "icons/event.png", id: 'event'},
{url: "icons/scholar_event.png", id: 'scholar+event'}
]).then(() => {
map.addSource('src', {
type: 'geojson',
data: data,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50,
clusterProperties: {
has_scholar: ["any", ["==", ["get", "type"], 'scholar'], "false"],
has_event: ["any", ["==", ["get", "type"], 'event'], "false"],
only_scholar: ["all", ["==", ["get", "type"], 'scholar'], "false"],
only_event: ["all", ["==", ["get", "type"], 'event'], "false"],
}
});
map.addLayer({
id: 'clusters',
type: 'symbol',
source: 'src',
filter: ['has', 'point_count'],
layout: {
'icon-image': [
"case",
["all", ["get", "has_scholar"], ["get", "has_event"]],
"scholar+event",
["get", "only_scholar"],
"scholar",
"event"
],
'icon-size': 0.06,
'icon-allow-overlap': true,
},
});
map.addLayer({
id: 'clusters-count-bg',
type: 'circle',
source: 'src',
filter: ['has', 'point_count'],
paint: {
'circle-color': '#51bbd6',
'circle-radius': 8,
'circle-translate': [-15, -15],
},
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'src',
filter: ['has', 'point_count'],
paint: {
'text-translate': [-15, -15],
},
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12,
'text-allow-overlap': true,
},
});
map.addLayer({
id: 'unclustered-point',
type: 'symbol',
source: 'src',
filter: ['!', ['has', 'point_count']],
layout: {
'icon-image': ["get", "type"],
'icon-size': 0.06,
'icon-allow-overlap': true,
},
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment