Overlapping Marker Spiderfier for Woosmap

Extension to add overlapping marker spiderfier on Woosmap. Spiderify markers on Woosmap using marker overlays. Note it does not create the spiderification in the canvas but on an overlay on top of the canvas. This uses woosmap.map.Marker() to create markers and spider legs.

Spiral/Circle positioning logic taken from and credits go to jawj/OverlappingMarkerSpiderfier.

Examples

• Basic
• Animated
• With clustering
• With infowindow
• With custom icon

Get started

First, install the dependency in your project.

yarn add @mit0ri/woosmap-spiderfier

Next, import the module into your JS file and instantiate WoosmapSpiderifier.

import { WoosmapSpiderifier } from '@mit0ri/woosmap-spiderfier'

// Sample features array
const 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' },
]

// Instantiate a Woosmap map
const map = new woosmap.map.Map(document.getElementById('map'), MAP_OPTIONS)

// Instantiate WoosmapSpiderifier with the map as the first parameter and options as the second parameter.
const spiderifier = new WoosmapSpiderifier(map, {
    circleFootSeparation: 60,
    circleSpiralSwitchover: 10,
})

// Spiderfies and displays given markers on the specified latitude and longitude.
spiderfier.spiderfy([-74.50, 40], features)

// On map click, unspiderfies markers if any are already spiderfied.
map.addListener('click', () => {
    spiderfier.unspiderfy()
})

Params

new WoosmapSpiderifier(map, options)

| param | description | |-----------|-----------------------------------------------| | map | Woosmap map instance new woosmap.map.Map(). | | options | Options object. See below. |

Options

| options | type | default | description | |--------------------------|------------|------------|---------------------------------------------------------------------------------------------------------------| | animate | Boolean | false | If true, the appearance and disappearance of markers will be animated. | | animationSpeed | Number | 200 | Number in milliseconds. Ignored if animate is false. | | circleSpiralSwitchover | Number | 9 | Number of markers till which the spider will be circular and beyond this threshold, it will spider in spiral. | | circleFootSeparation | Number | 25 | Related to circumference of circle. | | spiralFootSeparation | Number | 28 | Related to size of spiral. | | spiralLengthStart | Number | 15 | | | spiralLengthFactor | Number | 4 | | | customPin | Boolean | false | If false, a custom icon will be displayed. If true, you have to provide a custom icon in your CSS file. | | onInit | Function | () => {} | - @param0: spiderLeg | | onClick | Function | () => {} | - @param0: clickEvent - @param1: spiderLeg |

Functions

| function | params | description | |------------------------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------| | spiderfy(latLng, features) | | Spiderfies and displays given markers on the specified lat lng. | | | latLng | woosmap.map.LatLng(-122.420679, 37.772537) or [-122.420679, 37.772537]. | | | features | Array of plain objects. | | unspiderfy() | | Unspiderfies markers, if any spiderfied already. |