@mit0ri/woosmap-spiderfier v1.0.2

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)

Options

Functions