@mit0ri/woosmap-spiderfier

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.