react-mapboxgl-spiderifier


Rendering the spiderifier into react-mapbox-gl as React component.

Spiral/Circle positioning logic taken from and credits goes to https://github.com/jawj/OverlappingMarkerSpiderfier.

Examples:

- https://github.com/thuanmb/react-mapbox-gl-spiderifier/blob/master/src/App.js

!Demo Spiderifier.

Usage:

#### Simple spiderfication

Please note that the ReactMapboxGlSpiderifier should be used together with the React wrapper of mapbox-gl e.g. react-mapbox-gl.
https://github.com/alex3165/react-mapbox-gl

``js
import ReactMapboxGl from 'react-mapbox-gl';
import { ReactMapboxGlSpiderifier } from 'react-mapbox-gl-spiderifier';

const Map = ReactMapboxGl({
accessToken: '...',
});

const mapProps = {
style: 'mapbox://styles/mapbox/streets-v8',
};

class App extends Component {
onStyleLoad = (map) => {
this.map = map;
};

renderPopup(properties, coordinates, offset) {
if (this.currentPopup) {
this.currentPopup.remove();
}

setTimeout(() => {
this.currentPopup = new MapboxGl.Popup({ offset })
.setLngLat(coordinates)
.setHTML(Some description for node ${properties.value})
.addTo(this.map);
});
}

renderSpiderifierContent(key, value) {
return (


)
}

render() {
return (

);
}
}
`

Documentation

#### Properties

- coordinates ([number, number])
Display the Spiderifier at the given position

- circleSpiralSwitchover (number)
Show spiral instead of circle from this marker count upwards, 0 -> always spiral; Infinity -> always circle

- circleFootSeparation (number)
Related to circumference of circle

- spiralFootSeparation (number)
Related to size of spiral

- spiralLengthStart (number)
Related to size of spiral

- spiralLengthFactor (number)
Related to size of spiral

- animate (bool)
To enable animate the spiral

- animationSpeed (number)
Animation speed in milliseconds

- transformSpiderLeft (number)
The margin in left side of each spider

- transformSpiderTop (number)
The margin in top of each spider

- showingLegs (bool)
Indicate if the legs should be shown even when the spiderifier only have one spider element

#### Events

- onClick (function)
The click event handler

- onMouseDown (function)
The mouse down event handler

- onMouseEnter (function)
The mouse enter event handler

- onMouseLeave (function)
The mouse leave event handler

- onMouseMove (function)
The mouse move event handler

- onMouseOut (function)
The mouse out event handler

- onMouseOver (function)
The mouse over event handler

- onMouseUp (function)
The mouse up event handler

ChangeLog:

$3

- Bump dependencies version

$3

- Bump dependencies version

$3

- Bump dependencies version

$3

- Bump dependencies version

$3

- Bump dependencies version

$3

- Refactoring

$3

- Migrating the componentWill*

$3

- Upgrading packages

$3

- Upgrading packages

$3

- Upgrading packages

$3

- Upgrading packages

$3

- Fix bundling issue

$3

- Upgrading the depedencies version.

$3

- Upgrade all packages to latest version. These packages include: react, mapbox-gl, react-mapbox-gl,...

Development

$3


- Adding the .env file
- Adding the key REACT_APP_MAPBOX_GL_TOKEN into the .env file
- Starting the server by: yarn start

Upgrading dependencies checklist

- Pull the latest code
- Create a new branch
- Upgrading the dependencies
`
yarn upgrade-interactive --latest
`
- Test if the app works after upgrading: yarn start
- Build the package: yarn build
- Increasing the package version in the package.json
- Adding the release note in the README
- Push the change into Github
- Publish the package into npmjs: npm publish`