From 17991d6d4d3d6941112ad7f7eb2244a4252d72a9 Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Fri, 17 Feb 2023 10:06:15 -0500 Subject: [PATCH 1/6] Add onkeyup event to be able to use for accessibility --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 1796b49..4646bde 100644 --- a/index.js +++ b/index.js @@ -20,6 +20,7 @@ animationSpeed: 0, // animation speed in milliseconds customPin: false, // If false, sets a default icon for pins in spider legs. initializeLeg: NULL_FUNCTION, + onKeyUp: NULL_FUNCTION, onClick: NULL_FUNCTION, // --- // circleSpiralSwitchover: show spiral instead of circle from this marker count upwards @@ -74,6 +75,10 @@ options.onClick(e, spiderLeg); }; + elements.container.onkeyup = function (e) { + options.onKeyUp(e, spiderLeg); + }; + return spiderLeg; }); From 89986202d1e8f524355b7648726469604fbb8512 Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Fri, 17 Feb 2023 10:06:47 -0500 Subject: [PATCH 2/6] Add generic callbacks for spiderify & unspiderify --- index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.js b/index.js index 4646bde..faada1b 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,8 @@ initializeLeg: NULL_FUNCTION, onKeyUp: NULL_FUNCTION, onClick: NULL_FUNCTION, + onSpiderify: NULL_FUNCTION, + onUnspiderify: NULL_FUNCTION, // --- // circleSpiralSwitchover: show spiral instead of circle from this marker count upwards // 0 -> always spiral; Infinity -> always circle @@ -96,6 +98,7 @@ } previousSpiderLegs = spiderLegs; + options.onSpiderify(previousSpiderLegs) } function unspiderfy() { @@ -110,6 +113,8 @@ spiderLeg.mapboxMarker.remove(); } }); + options.onUnspiderify(previousSpiderLegs) + previousSpiderLegs = []; } From 4e4957913ec5c115ce69475038ed9e7fc42a94f0 Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Fri, 17 Feb 2023 10:07:09 -0500 Subject: [PATCH 3/6] Add optional cluster element to send custom event --- index.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index faada1b..843080c 100644 --- a/index.js +++ b/index.js @@ -49,7 +49,7 @@ }; // Private: - function spiderfy(latLng, features) { + function spiderfy(latLng, features, clusterElement = null) { var spiderLegParams = generateSpiderLegParams(features.length); var spiderLegs; @@ -68,7 +68,8 @@ feature: feature, elements: elements, mapboxMarker: mapboxMarker, - param: spiderLegParam + param: spiderLegParam, + clusterElement: clusterElement }; options.initializeLeg(spiderLeg); @@ -98,10 +99,20 @@ } previousSpiderLegs = spiderLegs; + + if (clusterElement) { + clusterElement.dispatchEvent( + new CustomEvent('spiderify', { + spiderLegs + }) + ) + } + options.onSpiderify(previousSpiderLegs) } - function unspiderfy() { + function unspiderfy(clusterElement = null) { + util.each(previousSpiderLegs.reverse(), function (spiderLeg, index) { if (options.animate) { spiderLeg.elements.container.style['transitionDelay'] = ((options.animationSpeed / 1000) / previousSpiderLegs.length * index) + 's'; @@ -113,6 +124,15 @@ spiderLeg.mapboxMarker.remove(); } }); + + if (clusterElement) { + clusterElement.dispatchEvent( + new CustomEvent('unspiderify', { + spiderLegs: spiderLegs, + }) + ) + } + options.onUnspiderify(previousSpiderLegs) previousSpiderLegs = []; From e86b66cb3e15cdb0cd40e9d895545ea470bf4e20 Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Tue, 21 Feb 2023 06:51:26 -0500 Subject: [PATCH 4/6] Update documentation for new methods --- README.md | 83 ++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 52 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index b9db842..2ffb19f 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,20 @@ 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. +Spiral/Circle positioning logic taken from and credits goes to . -## Examples: - - https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html +## Examples + +- + +## Note -## 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: +## Usage #### Simple Spiderfication of features + ```js var features = [ {id: 0, type: 'car', color: 'red'}, @@ -29,8 +32,8 @@ var map = new mapboxgl.Map({ }); var spiderifier = new MapboxglSpiderifier(map, { - onClick: function(e, spiderLeg){ - console.log('Clicked on ', spiderLeg); + onClick: function(e, spiderLeg){ + console.log('Clicked on ', spiderLeg); }, markerWidth: 40, markerHeight: 40, @@ -44,8 +47,11 @@ 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); @@ -79,7 +85,8 @@ function mouseClick(e) { ``` -#### Custom Pins With popup: +#### Custom Pins With popup + ```js var spiderifier = new MapboxglSpiderifier(map, { customPin: true, @@ -119,27 +126,36 @@ var spiderifier = new MapboxglSpiderifier(map, { ## 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 +- `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 + - `options.onKeyUp` **(function)** + - argument1 keyUpEvent + - argument2 spiderLeg + - `options.onSpiderify` **(function)** + - argument1 spiderLegs (that are being opened) + - `options.onUnspiderify` **(function)** + - argument1 spiderLegs (that have closed) **spiderLeg** Passed in options.initializeLeg/options.onClick(callbacks) and in spideifier.each (iterator) function. + ``` { feature: , @@ -159,23 +175,28 @@ spideifier.each (iterator) function. } ``` -#### Functions: - - ```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. +#### Functions - - ```MapboxglSpiderifier.popupOffsetForSpiderLeg(spiderLeg)``` returns an offset object that can be +- ```each(function(spiderLeg) {...} )``` Iterates over the currently spiderfied legs. + - ```function(spiderLeg)``` Function gets called once for every spider leg. +- ```spiderfy(latLng, features, clusterElement = null)``` 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. + - ```clusterElement``` DOM element of the cluster that was spiderified. +- ```unspiderfy(clusterElement = null)``` Unspiderfies markers, if any spiderfied already. + - ```clusterElement``` DOM element of the cluster that was spiderified. + +- ```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: +## ChangeLog 1.0.8 - - - MapboxglSpiderfier -> MapboxglSpider***i***fier ;) - - options.initializeMarker(markerObject) -> options.initializeLeg(spiderLeg) + +- MapboxglSpiderfier -> MapboxglSpider***i***fier ;) +- options.initializeMarker(markerObject) -> options.initializeLeg(spiderLeg) + ```js // Old: initializeMarker(markerObject) { From cd4c7f889150409871e2c990f2caa74ecaa3f73c Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Wed, 22 Feb 2023 06:18:54 -0500 Subject: [PATCH 5/6] Remove cluster element --- index.js | 25 +++---------------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/index.js b/index.js index 843080c..4d6c22c 100644 --- a/index.js +++ b/index.js @@ -49,7 +49,7 @@ }; // Private: - function spiderfy(latLng, features, clusterElement = null) { + function spiderfy(latLng, features) { var spiderLegParams = generateSpiderLegParams(features.length); var spiderLegs; @@ -68,8 +68,7 @@ feature: feature, elements: elements, mapboxMarker: mapboxMarker, - param: spiderLegParam, - clusterElement: clusterElement + param: spiderLegParam }; options.initializeLeg(spiderLeg); @@ -99,19 +98,10 @@ } previousSpiderLegs = spiderLegs; - - if (clusterElement) { - clusterElement.dispatchEvent( - new CustomEvent('spiderify', { - spiderLegs - }) - ) - } - options.onSpiderify(previousSpiderLegs) } - function unspiderfy(clusterElement = null) { + function unspiderfy() { util.each(previousSpiderLegs.reverse(), function (spiderLeg, index) { if (options.animate) { @@ -125,16 +115,7 @@ } }); - if (clusterElement) { - clusterElement.dispatchEvent( - new CustomEvent('unspiderify', { - spiderLegs: spiderLegs, - }) - ) - } - options.onUnspiderify(previousSpiderLegs) - previousSpiderLegs = []; } From 934361abcf62a67c10e694fb45bfa04e4821d39d Mon Sep 17 00:00:00 2001 From: Rosemary Stanley Date: Wed, 22 Feb 2023 06:20:32 -0500 Subject: [PATCH 6/6] Return spiderlegs instead of calling custom methods --- index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 4d6c22c..32f1352 100644 --- a/index.js +++ b/index.js @@ -22,8 +22,6 @@ initializeLeg: NULL_FUNCTION, onKeyUp: NULL_FUNCTION, onClick: NULL_FUNCTION, - onSpiderify: NULL_FUNCTION, - onUnspiderify: NULL_FUNCTION, // --- // circleSpiralSwitchover: show spiral instead of circle from this marker count upwards // 0 -> always spiral; Infinity -> always circle @@ -98,10 +96,11 @@ } previousSpiderLegs = spiderLegs; - options.onSpiderify(previousSpiderLegs) + return previousSpiderLegs; } function unspiderfy() { + var spiderLegs; util.each(previousSpiderLegs.reverse(), function (spiderLeg, index) { if (options.animate) { @@ -113,10 +112,12 @@ } else { spiderLeg.mapboxMarker.remove(); } + + spiderLegs.push(spiderLeg) }); - options.onUnspiderify(previousSpiderLegs) previousSpiderLegs = []; + return spiderLegs; } function generateSpiderLegParams(count) {