A custom layer for react-leaflet that makes plotting react components simple
npm install react-leaflet-marker-layerreact-leaflet-marker-layer provides a simple component for plotting React components as markers in a react-leaflet map.
!A screenshot of markers on a leaflet map
``js
import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import MarkerLayer from '../src/MarkerLayer';
const position = { lng: -122.673447, lat: 45.522558 };
const markers = [
{
position: { lng: -122.67344700000, lat: 45.522558100000 },
text: 'Voodoo Doughnut',
},
{
position: { lng: -122.67814460000, lat: 45.5225512000000 },
text: 'Bailey\'s Taproom',
},
{
position: { lng: -122.67535700000002, lat: 45.5192743000000 },
text: 'Barista'
},
{
position: { lng: -122.65596570000001, lat: 45.5199148000001 },
text: 'Base Camp Brewing'
}
];
class ExampleMarkerComponent extends React.Component {
render() {
const style = {
border: 'solid 1px lightblue',
backgroundColor: '#333333',
borderRadius: '50%',
marginTop: '-12px',
marginLeft: '-12px',
width: '24px',
height: '24px'
};
return (
}
class MapExample extends React.Component {
state = {
mapHidden: false
};
render() {
if (this.state.mapHidden) {
return (
return (
}
render(
`
The MarkerLayer component takes the following props:
- markers: an array of objects to be plottedlongitudeExtractor
- : a function that returns the marker object's longitude e.g. marker => marker.lnglatitudeExtractor
- : a function that returns the marker object's latitude e.g. marker => marker.latmarkerComponent
- : (required) the React component to be rendered for each marker, this component will receive the following propsmarker
- : the object from the markers arraystyle
- : a style object for positioning, you should include these styles on your componentmap
- : the Leaflet map object from the react-leaflet MapLayer...propsForMarkers
- : the component will also receive the properties of propsForMarkers as propspropsForMarkers
- : props to pass on to marker components
To try the example:
1. Clone this repository
2. run npm install in the root of your cloned repositorynpm run example
3. run
4. Visit localhost:8000
See CONTRIBUTING.md
react-leaflet-marker-layer` is MIT licensed.
See LICENSE.md for details.