Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add some additional callback options #21

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+64 −31
Open

Add some additional callback options #21

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17991d6
Add onkeyup event to be able to use for accessibility
rosemaryreilman Feb 17, 2023
8998620
Add generic callbacks for spiderify & unspiderify
rosemaryreilman Feb 17, 2023
4e49579
Add optional cluster element to send custom event
rosemaryreilman Feb 17, 2023
e86b66c
Update documentation for new methods
rosemaryreilman Feb 21, 2023
cd4c7f8
Remove cluster element
rosemaryreilman Feb 22, 2023
934361a
Return spiderlegs instead of calling custom methods
rosemaryreilman Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 52 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <https://github.com/jawj/OverlappingMarkerSpiderfier>.

## Examples:
- https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html
## Examples

- <https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html>

## 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'},
Expand All @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -79,7 +85,8 @@ function mouseClick(e) {

```

#### Custom Pins With popup:
#### Custom Pins With popup

```js
var spiderifier = new MapboxglSpiderifier(map, {
customPin: true,
Expand Down Expand Up @@ -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: <object>,
Expand All @@ -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) {
Expand Down
36 changes: 33 additions & 3 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@
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,
onSpiderify: NULL_FUNCTION,
onUnspiderify: NULL_FUNCTION,
// --- <SPIDER TUNING Params>
// circleSpiralSwitchover: show spiral instead of circle from this marker count upwards
// 0 -> always spiral; Infinity -> always circle
Expand All @@ -46,7 +49,7 @@
};

// Private:
function spiderfy(latLng, features) {
function spiderfy(latLng, features, clusterElement = null) {
var spiderLegParams = generateSpiderLegParams(features.length);
var spiderLegs;

Expand All @@ -65,7 +68,8 @@
feature: feature,
elements: elements,
mapboxMarker: mapboxMarker,
param: spiderLegParam
param: spiderLegParam,
clusterElement: clusterElement
};

options.initializeLeg(spiderLeg);
Expand All @@ -74,6 +78,10 @@
options.onClick(e, spiderLeg);
};

elements.container.onkeyup = function (e) {
options.onKeyUp(e, spiderLeg);
};

return spiderLeg;
});

Expand All @@ -91,9 +99,20 @@
}

previousSpiderLegs = spiderLegs;

if (clusterElement) {
clusterElement.dispatchEvent(
new CustomEvent('spiderify', {
spiderLegs
})
)
}

options.onSpiderify(previousSpiderLegs)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest, we return the spiderLegs on spiderfy and unspiderfy method calls. Since they are called from outside the library and i do not understand the need to emit these as events. For example:

   spiderifier.onSpiderfy = (args) => {
       ....
   }
   spiderifier.spiderfy([-74.50, 40], features);

   const spiderLegs =  spiderifier.spiderfy([-74.50, 40], features);
   onSpiderfy(spiderLegs);
   clusterElement.dispatchEvent(
       new CustomEvent('spiderify', {
          spiderLegs
       })
   );

The clusterElement seems like a implementation specific one and not generic for the library.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally up to you. Yes the clusterElement implementation was because, in the particular project, we wanted to manipulate how the original cluster marker looked when it was spiderified vs not. But I can remove for the library.

I'm not sure I quite understand what you're asking in suggesting returning the spiderLegs. But I attempted to adjust.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Return the spiderLegs in the spiderfy and unspiderfy function in the library. That way when you call spiderfy or unspiderfy, you can get the legs and do what you want with it

}

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';
Expand All @@ -105,6 +124,17 @@
spiderLeg.mapboxMarker.remove();
}
});

if (clusterElement) {
clusterElement.dispatchEvent(
new CustomEvent('unspiderify', {
spiderLegs: spiderLegs,
})
)
}

options.onUnspiderify(previousSpiderLegs)

previousSpiderLegs = [];
}

Expand Down