# mapboxgl-spiderifier 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 ## Note: Mapboxgl-js has exposed getClusterLeaves/getClusterChildren (from supercluster) in version [v0.47.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.47.0). Thereby, now we can get the features within a cluster from mapboxgl and spiderfy them using this library. ## Usage: #### 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(); }); ``` ### Getting features in a cluster from mapboxgl and spiderfying them Refer [Example 3](https://bewithjonam.github.io/mapboxgl-spiderifier/docs/example-mapbox-gl-cluster-spiderfy.html) ``` 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(<>).getClusterLeaves( 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: ```js var spiderifier = new MapboxglSpiderifier(map, { customPin: true, initializeLeg: function(spiderLeg) { var $spiderPinCustom = $('

', {class: 'spider-point-circle'}); $(spiderLeg.elements.pin).append($spiderPinCustom); $spiderPinCustom.css({ 'width': '10px', 'height':'10px', 'margin-left': '-5px', 'margin-top': '-5px', 'background-color': spiderLeg.feature.color, 'opacity': 0.8 }); var popup = new mapboxgl.Popup({ closeButton: true, closeOnClick: false, offset: MapboxglSpiderifier.popupOffsetForSpiderLeg(spiderLeg) }); popup.setHTML('Feature type is ' + spiderLeg.feature.type); spiderLeg.mapboxMarker.setPopup(popup); $(spiderLeg.elements.container) .on('mouseenter', function(){ popup.addTo(map); }) .on('mouseleave', function(){ popup.remove(); }); } }) ``` ## Doc #### Options ```js new MapboxglSpiderifier(map, options) ``` Constructs a mapboxgl spiderifier. - `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 will be circular and beyond this threshold, it will spider in spiral. - `options.customPin` **(boolean default: false)** - `options.initializeLeg` **(function)** function to provide a custom marker/popup for markers - argument1 spiderLeg - `options.onClick` **(function)** - argument1 clickEvent - argument2 spiderLeg **spiderLeg** Passed in options.initializeLeg/options.onClick(callbacks) and in spideifier.each (iterator) function. ``` { feature:

mapboxgl-spiderifier

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past