Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multipolygon support #305

Merged
merged 15 commits into from
Jun 19, 2018
Merged

Multipolygon support #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5bb0df3
initMarkers creates markers recursively, multipolygons ✅
codeofsumit Jun 15, 2018
ecf8e72
coords are properly updated on marker drag
codeofsumit Jun 15, 2018
efcef08
middlemarkers are now correctly positioned
codeofsumit Jun 16, 2018
79cb51e
new vertexes can now be created from middlemarkers
codeofsumit Jun 16, 2018
e0afbde
removing vertexes works now
codeofsumit Jun 16, 2018
6e4e049
events now include the
codeofsumit Jun 16, 2018
4ab99ec
snapping to other layers works
codeofsumit Jun 16, 2018
69a0449
Dragging works now
codeofsumit Jun 16, 2018
6264aa0
Polylines are working now
codeofsumit Jun 16, 2018
e655fa7
cutting holes and a regular poly into a multipoly works
codeofsumit Jun 16, 2018
43dcec4
updated README for MultiPolygon support
codeofsumit Jun 16, 2018
2cb7879
one dimensional coords are now removed correctly
codeofsumit Jun 17, 2018
f22e99f
layers are now properly removed when all vertexes are gone
codeofsumit Jun 17, 2018
c73739c
added small credit
codeofsumit Jun 18, 2018
c5762f7
better handling of last vertex removal
codeofsumit Jun 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Draw, Edit, Drag, Cut and Snap Features.

In the name "leaflet.pm" the "pm" stands for Polygon Management. At the time,
this plugin only supported polygons. Now you can edit Markers, Polylines,
Polygons, Circles, Rectangles, LayerGroups, GeoJSON and more are coming.
Polygons, Circles, Rectangles, LayerGroups, GeoJSON, MultiPolygons, MultiPolylines and more are coming.

## [Demo (click here)](https://leafletpm.now.sh)

Expand All @@ -26,12 +26,6 @@ As we are always using the latest leaflet version in a big production app, I wil
npm install leaflet.pm --save
```

#### Install via Bower (DEPRECATED - leaflet.pm is no longer supporting bower since 0.17.0)

```
bower install leaflet.pm --save
```

#### Install Manually

Download
Expand Down
25 changes: 16 additions & 9 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,14 @@ map2.pm.addControls({
deleteLayer: true,
});

map2.pm.disableDraw('Poly');
// map2.pm.disableDraw('Poly');
// map2.pm.enableDraw('Circle', {
// snappable: true,
// cursorMarker: true
// });

map2.pm.enableDraw('Line', { allowSelfIntersection: false });
map2.pm.enableDraw('Poly', { allowSelfIntersection: false });
// map2.pm.enableDraw('Line', { allowSelfIntersection: false });
// map2.pm.enableDraw('Poly', { allowSelfIntersection: false });

map2.on('pm:globaleditmodetoggled', function(e) {
// console.log(e);
Expand All @@ -109,7 +109,7 @@ const geoJsonData = {
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
type: 'MultiLineString',
coordinates: [
[
[-0.15483856201171872, 51.527329038465936],
Expand All @@ -118,7 +118,14 @@ const geoJsonData = {
[-0.13149261474609375, 51.5042549065934],
[-0.11758804321289061, 51.518463972439385],
[-0.13303756713867188, 51.53106680201548],
[-0.15483856201171872, 51.527329038465936],
],
[
[-0.20483856201171872, 51.527329038465936],
[-0.19577310180664062, 51.51643437722083],
[-0.18564508056640625, 51.50094238217541],
[-0.17149261474609375, 51.5042549065934],
[-0.17758804321289061, 51.518463972439385],
[-0.19303756713867188, 51.53106680201548],
],
],
},
Expand Down Expand Up @@ -176,9 +183,9 @@ const bounds = scotland.getBounds();

map3.fitBounds(bounds);

geoJsonLayer.addEventListener('click', function(e) {
geoJsonLayer.pm.toggleEdit();
});
// geoJsonLayer.addEventListener('click', function(e) {
// geoJsonLayer.pm.toggleEdit();
// });

geoJsonLayer.on('pm:edit', function(e) {
console.log(e);
Expand Down Expand Up @@ -232,7 +239,7 @@ polygonLayer.on('pm:intersect', function(e) {
map2.pm.toggleGlobalEditMode({
allowSelfIntersection: false,
preventMarkerRemoval: false,
preventVertexEdit: true,
preventVertexEdit: false,
});
// map2.pm.disableGlobalEditMode();

Expand Down
7 changes: 3 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
"dependencies": {
"@turf/difference": "6.x",
"@turf/intersect": "6.x",
"@turf/kinks": "6.x"
"@turf/kinks": "6.x",
"lodash": "^4.17.10"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.40",
Expand Down
34 changes: 7 additions & 27 deletions src/js/Draw/L.PM.Draw.Cut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,34 +39,14 @@ Draw.Cut = Draw.Poly.extend({
// find layer difference
const diff = difference(l.toGeoJSON(), layer.toGeoJSON());

// if result is a multipolygon, split it into regular polygons
// TODO: remove as soon as multipolygons are supported
if (diff.geometry.type === 'MultiPolygon') {
const geoJSONs = diff.geometry.coordinates.reduce((arr, coords) => {
arr.push({ type: 'Polygon', coordinates: coords });
return arr;
}, []);
// add new layer to map
const newL = L.geoJSON(diff, l.options).addTo(this._map);
resultingLayers.push(newL);
newL.addTo(this._map);

// add new layers to map
geoJSONs.forEach((g) => {
const newL = L.geoJSON(g, l.options);
resultingLayers.push(newL);
newL.addTo(this._map);

// give the new layer the original options
newL.pm.enable(this.options);
newL.pm.disable();
});
} else {
// add new layer to map
const newL = L.geoJSON(diff, l.options).addTo(this._map);
resultingLayers.push(newL);
newL.addTo(this._map);

// give the new layer the original options
newL.pm.enable(this.options);
newL.pm.disable();
}
// give the new layer the original options
newL.pm.enable(this.options);
newL.pm.disable();

// fire pm:cut on the cutted layer
l.fire('pm:cut', {
Expand Down
Loading