Leaflet Editor

Here is an react library to overcome some disadvantages of current available editors of leaflet
1. You can add points to linestring
2. You can add ability to not to delete endpoints of linestring
3. You can drag intersection points to linestring
4. You can remove middle markers of linestring

$3

#### Install Leaflet-Linestring-editor by following command
``
npm install leaflet-linestring-editor --save
`
#### Install Manually

Download
leaflet-geoman.css and
leaflet-geoman.min.js
and include them in your project.

#### Include via CDN

CSS


`html

`

JS

`html

`

#### Include as ES6 Module

`js
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
`

Getting Started

#### import in react component
import EditableGeometry from 'leaflet-editor-try/dist/EditableGeometry'

#### You have to pass geojson and leaflet map object as props and others props are optional
initialize your leaflet map and then pass it as prop
`html
{this.map ? :null}
`
see the example for more info

See the available options in the table below.

| Option | Default | Description |
| :------------ | :---------- | :----------------------------------------------------------------------------------------------- |
| style | | style of the linestring to be displayed can refer to leaflet docs |
| canAddPoints | true | can add new points by double clicking on line |
| canDragIntersection | true | intersected markers can be dragged together |
| canDeleteEndPoints | false | to avoid deleting end points as well as intersection points |
| removeMiddleMarkers | false | to remove middle markers added by geoman library |

Example

`
import React from 'react';
import ReactDOM from 'react-dom'
import logo from './logo.svg';
import './App.css';
import EditableGeometry from 'leaflet-editor-try/dist/EditableGeometry'
import L from 'leaflet'

class App extends React.Component {
componentDidMount() {
this.map = this.map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(this.map);

this.feature = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "00004632-3200-0400-0000-00000060f0da",
"geometry": {
"type": "LineString",
"coordinates": [
[-3.267764, 48.684605],
[-3.265329, 48.683851]
]
}
}, {
"type": "Feature",
"id": "00004632-3200-0400-0000-00000060f0db",
"geometry": {
"type": "LineString",
"coordinates": [
[-3.265329, 48.683851],
[-3.265285, 48.684035],
[-3.265092, 48.684377],
[-3.264302, 48.685239]
]
}
}, {
"type": "Feature",
"id": "00004632-3200-0400-0000-00000060f11b",
"geometry": {
"type": "LineString",
"coordinates": [
[-3.265329, 48.683851],
[-3.264471, 48.683738]
]
}
}, {
"type": "Feature",
"id": "00004632-3200-0400-0000-00000060f0b9",
"geometry": {
"type": "LineString",
"coordinates": [
[-3.264302, 48.685239],
[-3.263853, 48.685019],
[-3.263599, 48.684827],
[-3.262987, 48.68482],
[-3.262161, 48.685286]
]
}
}, {
"type": "Feature",
"id": "00004632-3200-0400-0000-00000060f103",
"geometry": {
"type": "LineString",
"coordinates": [
[-3.262161, 48.685286],
[-3.261748, 48.684993],
[-3.261225, 48.68435]
]
}
}]
}

this.forceUpdate()
}

render() {
let geoJsonLayerOptions = {
style: {
color: 'red',
weight: 7
},
canAddPoints:true,
canDeleteEndPoints:false,
canDragIntersection:true,
removeMiddleMarkers:false
}

return (

{this.map ? : null}

);
}

}

export default App;

``

Built With

* Create React App
* Leaflet
* Leaflet-Geoman

Authors

* Prasad Kulkarni - (https://github.com/prasad5795) (kulkarniprasad57@gmail.com)

$3

I'm adopting the Issue Management of lodash which means, feature requests get the "Feature Request" Label and then get closed.
You can upvote existing feature requests (or create new ones). Upvotes make me see how much a feature is requested and prioritize their implementation.
Please see the existing Feature Requests here and upvote if you want them to be implemented.

License

This project is licensed under the MIT License - see the LICENSE.md file for details