react-mapbox-gl-spiderifier
v1.12.0
Published
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/thuanmb/react-mapbox-gl-spiderifier/blob/master/LICENSE) [![npm downloads](https://img.shields.io/npm/dm/react-mapbox-gl-spiderifier.svg)](https://www.npmjs.com/pack
Downloads
603
Readme
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
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
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 (
<div className="spiderifier-marker-content" key={key} properties={{ value }}>
<div>{value}</div>
</div>
)
}
render() {
return (
<div className="App">
<Map {...mapProps} onStyleLoad={this.onStyleLoad}>
<ReactMapboxGlSpiderifier
coordinates={[-0.2268, 51.5361]}
onClick={(properties, coords, offset) => this.renderPopup(properties, coords, offset)}
>
{[100, 200, 300, 400, 500].((n, index) => this.renderSpiderifierContent(index, n))}
</ReactMapboxGlSpiderifier>
</Map>
</div>
);
}
}
Documentation
Properties
coordinates ([number, number])
Display the Spiderifier at the given positioncircleSpiralSwitchover (number)
Show spiral instead of circle from this marker count upwards, 0 -> always spiral; Infinity -> always circlecircleFootSeparation (number)
Related to circumference of circlespiralFootSeparation (number)
Related to size of spiralspiralLengthStart (number)
Related to size of spiralspiralLengthFactor (number)
Related to size of spiralanimate (bool)
To enable animate the spiralanimationSpeed (number)
Animation speed in millisecondstransformSpiderLeft (number)
The margin in left side of each spidertransformSpiderTop (number)
The margin in top of each spidershowingLegs (bool)
Indicate if the legs should be shown even when the spiderifier only have one spider element
Events
onClick (function)
The click event handleronMouseDown (function)
The mouse down event handleronMouseEnter (function)
The mouse enter event handleronMouseLeave (function)
The mouse leave event handleronMouseMove (function)
The mouse move event handleronMouseOut (function)
The mouse out event handleronMouseOver (function)
The mouse over event handleronMouseUp (function)
The mouse up event handler
ChangeLog:
1.12.0
- Bump dependencies version
1.11.1
- Bump dependencies version
1.11.0
- Bump dependencies version
1.10.0
- Bump dependencies version
1.9.0
- Bump dependencies version
1.6.0
- Refactoring
1.5.0
- Migrating the componentWill*
1.4.0
- Upgrading packages
1.3.0
- Upgrading packages
1.2.0
- Upgrading packages
1.1.0
- Upgrading packages
1.0.2
- Fix bundling issue
1.0.1
- Upgrading the depedencies version.
0.2.0 [BREAKING CHANGES]
- Upgrade all packages to latest version. These packages include:
react
,mapbox-gl
,react-mapbox-gl
,...
Development
Starting the server in local
- 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