Here is an react library to overcome some disadvantages of current available editors of leaflet
- You can add points to linestring
- You can add ability to not to delete endpoints of linestring
- You can drag intersection points to linestring
- You can remove middle markers of linestring
npm install leaflet-linestring-editor --save
Download
leaflet-geoman.css
and
leaflet-geoman.min.js
and include them in your project.
CSS
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
JS
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import EditableGeometry from 'leaflet-editor-try/dist/EditableGeometry'
initialize your leaflet map and then pass it as prop
{this.map ? <EditableGeometry map={this.map} feature={this.feature} geoJsonLayerOptions={geoJsonLayerOptions}></EditableGeometry>: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 |
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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
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 (
<React.Fragment>
<div id="map" className="map-container" style={{ height: window.screen.height, width: window.screen.width, overflow: 'hidden', overflowY: 'hidden' }}></div>
{this.map ? <EditableGeometry map={this.map} feature={this.feature} geoJsonLayerOptions={geoJsonLayerOptions}></EditableGeometry> : null}
</React.Fragment>
);
}
}
export default App;
- Prasad Kulkarni - (https://github.com/prasad5795) ([email protected])
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.
This project is licensed under the MIT License - see the LICENSE.md file for details