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. 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(); });`

`$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(<>).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

mapboxgl-spiderifier

Examples:

Note:

Usage:

$3

Doc

ChangeLog:

`$3`

`Doc`

`ChangeLog:`