mapboxgl-spiderifier
Version:
Spiderify markers on mapbox-gl using marker overlays.
182 lines (164 loc) • 6.08 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<link rel="stylesheet" type="text/css" href="../index.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js"></script>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="../index.js"></script>
<title>Mapbox gl spiderifier Custom markers</title>
<style type="text/css">
#map {
width: 100%;
height: 500px;
}
.spider-leg-container .spider-leg-pin {
position: relative;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
font-size: 20px;
}
.spider-leg-container .spider-leg-pin i.type-icon {
color: white;
}
</style>
<script type="text/javascript">
var iconTypes = ['car', 'bicycle', 'bus', 'cab', 'truck', 'train', 'rocket', 'ship'];
var iconColors = ['red', 'blue', 'green', 'orange', '#ab1234', '#112312'];
var randomMarker = function(index){
return {
id: index,
type: _.sample(iconTypes),
color: _.sample(iconColors)
}
};
mapboxgl.accessToken = 'pk.eyJ1Ijoic29jcmF0YSIsImEiOiJjaXJxc2wzam0waGU5ZmZtODhqd2ttamdxIn0.1ZQEByXoDD7fGIa9lUHIqg';
window.onload=function(){
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.50, 40],
zoom: 7,
});
var spiderifier = new MapboxglSpiderifier(map, {
animate: true,
animationSpeed: 200,
customPin: true,
onClick: function(e, spiderLeg){
console.log(spiderLeg);
},
initializeLeg: initializeSpiderLeg
});
function initializeSpiderLeg(spiderLeg){
var pinElem = spiderLeg.elements.pin;
var feature = spiderLeg.feature;
var popup;
pinElem.className = pinElem.className + ' fa-stack fa-lg';
pinElem.innerHTML = '<i class="circle-icon fa fa-circle fa-stack-2x"></i>' +
'<i class="type-icon fa fa-' + feature.type + ' fa-stack-1x"></i>'
pinElem.style.color = feature.color;
$(pinElem)
.on('click', function(e){
popup = new mapboxgl.Popup({
closeButton: true,
closeOnClick: false,
closeOnMove: false,
offset: MapboxglSpiderifier.popupOffsetForSpiderLeg(spiderLeg)
});
console.log('called');
popup.setHTML('Icon used is <b>fa-' + feature.type+'</b>')
.addTo(map);
spiderLeg.mapboxMarker.setPopup(popup);
spiderLeg.mapboxMarker.togglePopup();
popup.on('close', (e) => console.log('close',e))
popup.on('open', (e) => console.log('open',e))
})
.on('mouseleave', function(){
if(popup){
popup.remove();
}
});
}
map.on('style.load', function() {
map.addSource('circle', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{type: 'feature',
properties: {count: 6},
geometry: {
type: 'Point',
coordinates: [-74.50, 40]
}},
{type: 'feature',
properties: {count: 20},
geometry: {
type: 'Point',
coordinates: [-75.50, 40.5]
}},
{type: 'feature',
properties: {count: 50},
geometry: {
type: 'Point',
coordinates: [-76.0, 39.5]
}}
]
}
});
map.addLayer({
'id': 'circle',
'type': 'circle',
'source': 'circle',
'paint': {
'circle-radius': 30,
'circle-color': '#288DC1',
'circle-opacity': 0.8
},
});
map.on('mousemove', mouseMove);
map.on('click', mouseClick);
});
function mouseClick(e) {
var clickedOnFeatures = map.queryRenderedFeatures(e.point, {
layers: ['circle']
});
if (!clickedOnFeatures.length) {
// spiderifier.unspiderfy();
return;
}
var clickedOnFeature = clickedOnFeatures[0];
var features = _.map(_.range(clickedOnFeature.properties.count), randomMarker);
spiderifier.spiderfy(clickedOnFeature.geometry.coordinates, features);
}
function mouseMove(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['circle']
});
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
}
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">MapboxglSpiderifier</a>
</div>
</div>
</nav>
<div class="container" style="margin-top: 100px;">
<p>Click on any blue circle for spiderified markers. On every click, different number of markers will load.</p>
<div id="map"></div>
</div>
</body>
</html>