@bewithjonam/mapboxgl-spiderifier
Version:
Spiderify markers on mapbox-gl using marker overlays.
68 lines (52 loc) • 1.79 kB
Markdown
**NOTE** this is not our library, simply publishing it via npm so we can consume it. if u want it back just hit us up
mimio boyz for life
Spiderify 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.
- https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html
```js
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.50, 40],
zoom: 9
}),
spiderfier = new MapboxglSpiderfier(map, {
onClick: function(e, options){
console.log(options.marker);
},
markerWidth: 40,
markerHeight: 40,
});
map.on('style.load', function() {
var markers = [{id: 0}, {id: 1}, {id: 2}, {id: 3}, {id: 4}];
spiderfier.spiderfy(e.lngLat, markers);
});
map.on('click', function(){
spiderfier.unspiderfy();
})
```
```js
new MapboxglSpiderfier(map, options)
```
Constructs a mapboxgl spiderifier.
* map => mapbox gl map object.
* options
- markerWidth: number
- markerHeight: number
- onClick: function(clickEvent, options)
- animate: true|false
- animationSpeed: number in milliseconds (animation speed)
```js
spiderfier.spiderfy(latLng, markerArray);
```
Spiderfies and displays given markers on the specified lat lng.
* latLng => new mapboxgl.LngLat(-122.420679, 37.772537); OR [-122.420679, 37.772537];
* markerArray => array of plain objects.
```js
spiderfier.unspiderfy();
```
Unspiderfies markers, if any spiderfied already.