Spiderify markers on mapbox-gl using marker overlays.
npm install mapboxgl-spiderifierSpiderify markers on mapbox-gl using marker overlays. Note it does not create the spiderfication in the canvas but on a overlay on top of the canvas. This uses mapboxgl.Marker to create markers and spider legs.
Spiral/Circle positioning logic taken from and credits goes to https://github.com/jawj/OverlappingMarkerSpiderfier.
#### Simple Spiderfication of features
``js
var features = [
{id: 0, type: 'car', color: 'red'},
{id: 1, type: 'bicycle', color: '#ff00ff'},
{id: 2, type: 'bus', color: 'blue'},
{id: 3, type: 'cab', color: 'orange'},
{id: 4, type: 'train', color: 'red'}
];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.50, 40],
zoom: 9
});
var spiderifier = new MapboxglSpiderifier(map, {
onClick: function(e, spiderLeg){
console.log('Clicked on ', spiderLeg);
},
markerWidth: 40,
markerHeight: 40,
});
map.on('style.load', function() {
spiderifier.spiderfy([-74.50, 40], features);
});
map.on('click', function(){
spiderifier.unspiderfy();
});
``$3
Refer Example 3
map.on('style.load', function() {
map.on('click', mouseClick);
});
function mouseClick(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: [<
});
spiderifier.unspiderfy();
if (!features.length) {
return;
} else {
map.getSource(<
features[0].properties.cluster_id,
100,
0,
function(err, leafFeatures){
if (err) {
return console.error('error while getting leaves of a cluster', err);
}
var markers = _.map(leafFeatures, function(leafFeature){
return leafFeature.properties;
});
spiderifier.spiderfy(features[0].geometry.coordinates, markers);
}
);
}
}
`
#### Custom Pins With popup: $(spiderLeg.elements.pin).append($spiderPinCustom); var popup = new mapboxgl.Popup({ popup.setHTML('Feature type is ' + spiderLeg.feature.type); $(spiderLeg.elements.container) #### Options Constructs a mapboxgl spiderifier. #### Functions: - ` 1.0.8 - // Old // New Moving ./lib/mapbox-gl-spiderifier.css to ./index.css
`js
var spiderifier = new MapboxglSpiderifier(map, {
customPin: true,
initializeLeg: function(spiderLeg) {
var $spiderPinCustom = $('', {class: 'spider-point-circle'});
$spiderPinCustom.css({
'width': '10px',
'height':'10px',
'margin-left': '-5px',
'margin-top': '-5px',
'background-color': spiderLeg.feature.color,
'opacity': 0.8
});
closeButton: true,
closeOnClick: false,
offset: MapboxglSpiderifier.popupOffsetForSpiderLeg(spiderLeg)
});
spiderLeg.mapboxMarker.setPopup(popup);
.on('mouseenter', function(){
popup.addTo(map);
})
.on('mouseleave', function(){
popup.remove();
});
}
})
`Doc
`js`
new MapboxglSpiderifier(map, options)
- map (mapbox gl map mandatory).options
- (object optional)options.animate
- (boolean default: false)options.animationSpeed
- (number default: 200) number in milliseconds (animation speed)options.circleSpiralSwitchover
- (number default: 9) number of markers till which the spider willoptions.customPin
be circular and beyond this threshold, it will spider in spiral.
- (boolean default: false)options.initializeLeg
- (function) function to provide a custom marker/popup for markersoptions.onClick
- argument1 spiderLeg
- (function)
- argument1 clickEvent
- argument2 spiderLeg
spiderLeg Passed in options.initializeLeg/options.onClick(callbacks) and in
spideifier.each (iterator) function.
``
{
feature:
- `each(function(spiderLeg) {...} )` Iterates over the currently spiderfied legs.`
- function(spiderLeg)` Function gets called once for every spider leg.`
- spiderfy(latLng, features)` Spiderfies and displays given markers on the specified lat lng.`
- latLng` new mapboxgl.LngLat(-122.420679, 37.772537); OR [-122.420679, 37.772537];`
- features` array of plain objects.`
- unspiderfy()` Unspiderfies markers, if any spiderfied already.MapboxglSpiderifier.popupOffsetForSpiderLeg(spiderLeg)` returns an offset object that can be
passed to mapboxgl's popup so that the popup will be positioned next to the pin rather than the center
of the spider.ChangeLog:
- MapboxglSpiderfier -> MapboxglSpiderifier ;)
- options.initializeMarker(markerObject) -> options.initializeLeg(spiderLeg)
`js
// Old:
initializeMarker(markerObject) {
// markerObject => {
// marker: {...}, // changed to feature
// elements: {
// parent: <...>,
// line: <...>,
// marker: <...>, // changed to pin
// },
// "mapboxMarker":{...},
// "spiderParam":{
// "x":-4.373587244338389,
// "y":14.3482310622655,
// "angle":1.8666666666666667,
// "legLength":15,
// "index":0
// }
// }
// ...
}
// New:
initializeLeg(spiderLeg) {
// spiderLeg => {
// feature: {...},
// elements: {
// container: <...>,
// line: <...>,
// pin: <...>,
// },
// "mapboxMarker":{...},
// "params":{
// "x":-4.373587244338389,
// "y":14.3482310622655,
// "angle":1.8666666666666667,
// "legLength":15,
// "index":0
// }
// }
// ...
}
// .spidered-marker
// | - .line-div
// | - .icon-div
// .spider-leg
// | - .spider-leg-line
// | - .spider-leg-pin
Moving ./lib/mapbox-gl-spiderifier.js to ./index.js
``