alex3165 / React Leaflet Draw
React component for leaflet-draw on top of react-leaflet
Stars: ✭ 159
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Leaflet Draw
Mapbox Gl Native Android
Interactive, thoroughly customizable maps in native Android powered by vector tiles and OpenGL
Stars: ✭ 135 (-15.09%)
Mutual labels: map
Openrailwaymap
An OpenStreetMap-based project for creating a map of the world's railway infrastructure.
Stars: ✭ 150 (-5.66%)
Mutual labels: map
Simplemap
A beautifully simple map field type for Craft CMS.
Stars: ✭ 136 (-14.47%)
Mutual labels: map
Papyruscs
PapyrusCS renders maps of Minecraft: Bedrock Edition worlds using C#, LevelDB and leaflet.
Stars: ✭ 146 (-8.18%)
Mutual labels: map
Mongolastic
🚥 A dataset migration tool from MongoDB to Elasticsearch and vice versa.
Stars: ✭ 131 (-17.61%)
Mutual labels: map
Redux Data Structures
Reducer factory functions for common data structures: counters, maps, lists (queues, stacks), sets, etc.
Stars: ✭ 157 (-1.26%)
Mutual labels: map
React Svg Map
A set of React.js components to display an interactive SVG map
Stars: ✭ 150 (-5.66%)
Mutual labels: map
React Mindmap
Full featured mind map app which build with react.js. 一个功能完备且有很多创新的思维导图app。
Stars: ✭ 146 (-8.18%)
Mutual labels: map
Airmapview
A view abstraction to provide a map user interface with various underlying map providers
Stars: ✭ 1,824 (+1047.17%)
Mutual labels: map
Tangram
WebGL map rendering engine for creative cartography
Stars: ✭ 1,964 (+1135.22%)
Mutual labels: map
Ahorn
Visual Map Maker and Level Editor for the game Celeste
Stars: ✭ 132 (-16.98%)
Mutual labels: map
Votemapswitzerland
A Swiss version of the famous visualization «Land doesn't vote, people do.»
Stars: ✭ 150 (-5.66%)
Mutual labels: map
React-Leaflet-Draw
React component build on top of React-Leaflet that integrate leaflet-draw feature.
Install
npm install react-leaflet-draw
Getting started
First, include leaflet-draw styles in your project
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
or by including
node_modules/leaflet-draw/dist/leaflet.draw.css
You might need to add one more rule missing in the current css:
.sr-only {
display: none;
}
It's important to wrap EditControl component into FeatureGroup component from react-leaflet
.
The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited.
import { Map, TileLayer, FeatureGroup, Circle } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw"
const Component = () => (
<FeatureGroup>
<EditControl
position='topright'
onEdited={this._onEditPath}
onCreated={this._onCreate}
onDeleted={this._onDeleted}
draw={{
rectangle: false
}}
/>
<Circle center={[51.51, -0.06]} radius={200} />
</FeatureGroup>
);
For more details on how to use this plugin check the example.
You can pass more options on draw object, this informations can be found here
EditControl API
Props
name | type | description |
---|---|---|
position | string | control group position |
draw | object | enable/disable draw controls |
edit | object | enable/disable edit controls |
onEdited | function | hook to leaflet-draw's draw:edited event |
onCreated | function | hook to leaflet-draw's draw:created event |
onDeleted | function | hook to leaflet-draw's draw:deleted event |
onMounted | function | hook to leaflet-draw's draw:mounted event |
onEditStart | function | hook to leaflet-draw's draw:editstart event |
onEditStop | function | hook to leaflet-draw's draw:editstop event |
onDeleteStart | function | hook to leaflet-draw's draw:deletestart event |
onDeleteStop | function | hook to leaflet-draw's draw:deletestop event |
onDrawStart | function | hook to leaflet-draw's draw:drawstart event |
onDrawStop | function | hook to leaflet-draw's draw:drawstop event |
onDrawVertex | function | hook to leaflet-draw's draw:drawvertex event |
onEditMove | function | hook to leaflet-draw's draw:editmove event |
onEditResize | function | hook to leaflet-draw's draw:editresize event |
onEditVertex | function | hook to leaflet-draw's draw:editvertex event |
Links to docs
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].