UNPKG

@bewithjonam/mapboxgl-spiderifier

Version:

Spiderify markers on mapbox-gl using marker overlays.

68 lines (52 loc) 1.79 kB
# mapboxgl-spiderifier **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. ## Examples: - https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html ## Usage: ```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(); }) ``` ## Doc ```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.