geoman-io / leaflet-geoman Goto Github PK
View Code? Open in Web Editor NEWππΊοΈ The most powerful leaflet plugin for drawing and editing geometry layers
Home Page: https://geoman.io
License: MIT License
ππΊοΈ The most powerful leaflet plugin for drawing and editing geometry layers
Home Page: https://geoman.io
License: MIT License
Hi,
I'm currently trying to configure a function to save the draw data to a geojson file, however the markers are not integrate to the function with "map.on('pm:create', function(e) {//...});".
I noticed that it's possible with other objects like line and polygon.
Do you have a solution for this?
Thanks
So devs don't have to use the button but can trigger drawing manually
pm:edit seems to fire only when coords change, not when new coords are added.
use it.
Uncaught TypeError: Cannot read property 'geometry' of undefined
well, you gotta pass a parent object to the leaflet events and make the stuff you wanna pass a child node. Like a layer or shape-type.
Just fix it.
The current gh-pages
branch is a small copy/mix of the demo.js
in the master branch and the readme file.
Create a new website that shows off the features of leaflet.pm
The features grow - there will soon be too much cases to test manually so: automate it with unit tests, possibly e2e tests.
Hi there.
There are several pm-custom events including created
, edited
and dragXYZ
.
AFAIK there are no events which get triggered when a polygon gets deleted. On the one hand it would be nice to ask for confirmation (like a pm:deletestart
event) and on the other hand I would like to send a request after the polygon was deleted (like a pm:deleteend
event).
thanks :)
Fix: disable drag during activation of removal tool
Or: prevent click on dragend
if(this.toggled()) {
L.PM.enableDraw({
map: map
});
} else {
L.PM.disableDraw(map);
}
should be replaced with a toggleDraw
function.
L.PM.Draw.Poly
should return if drawing mode is active or not.
Double Check that L.PM.Draw isn't getting messed up with multiple instances/maps.
Would like to make use of event handlers like pm:dragstart
and pm:dragend
for polygons markers. So it would be possible to handle some tasks as soon as a polygon marker is dragged.
when middleMarker become normal marker , it can't drag in Leaflet 1.0.0-rc.2.
There are issues with multiple maps on a page as L.PM.Draw() is used like I'm a noob coder or something.
Fix it, future self π
Add L.PM.Draw as a new
object to a map. Then everything is π
do it
Enable drawing mode, enable edit mode of a polygon, drag a marker => errors.
This is because the yet-to-be-drawn polygon is already a layer on the map but has no (as in, less than 2) coordinates.
Draw at least two coordinates and the errors disappear.
This means the snap-calculation needs to handle (=ignore) layers with fewer than 2 coordinate points.
because...
Hello, first, I want to show this is a great plugin. I am able to show measurement on line and polyon by integrating this with leaflet plugin (Leaflet Measure Path by ProminentEdge) in the option.
map.pm.setPathOptions({
showMeasurements: true,
});
But, I do not know how to update those measurements when I edit a line or polygon. I am new to leaflet. Could you please help me?
As soon as I click on a polygon the pm:edit
event get triggered. Even if there is no change related to the coordinates.
Is it the desired behavior?
var options = {
drawPolygon: true, // adds button to draw a polygon
editPolygon: true, // adds button to toggle global edit mode
deleteLayer: true // adds a button to delete layers
};
this is bad naming for these buttons. Change it.
After drawing out a polygon, if you want to remove it... you can remove all points except the last one.
Also, it would be great to see some functionality for deleting an entire polygon with one action as opposed to a point by point removal approach.
Nevertheless, nice work so far!
Hello @codeofsumit ,
I am the member of cdnjs project.
I want to add this library, but the license mentioned in README.md https://github.com/codeofsumit/leaflet.pm#license is different from the package.json and also on npm. The first is MIT and second is ISC.
I want to confirm with you which one is the correct license.
As soon as there is an edit button in the toolbar (soon) - after successful drawing, the edit mode should be enabled via toolbar, not automatically.
You should check Leaflet.Editable, as a Leaflet.Draw alternative Leaflet 1.0 compliant.
currently, when removing a layer from the map while in edit mode, it's markers stay on the map.
Find a hook into layer.remove
and call layer.pm.disable()
.
Do it
Exactly drawn polygons (snapping ftw) share vertexes, obviously. In edit-mode, the markers to edit those vertexes are stacked on top of each other. Now the user can't reliably drag the marker/vertex for a specific polygon. It's kinda random.
Find a solution for it. Any solution. The last one caused the terrible bug #79
Not sure how bower can handle images (icons). Got to do something about it or make it a requirement that devs provide icon paths.
that's because firefox needs content
to be inside an :after
pseude element.
Add a firefox fix to the css file.
the first click after the create-polygon button is pressed doesn't do anything. Maybe the map has to get focused?
layer.pm = class;
class._layer = layer
π€ this is bad. Get rid of it you fool.
If GeoJSON layer contains points then pm
logs console error Uncaught TypeError: Cannot read property 'enabled' of undefined
when it sees the L.Marker type of layer.
To reproduce use this: http://plnkr.co/edit/ZjLXPgIWpcAq2k9xIKoJ?p=preview
Expected behavior: map.fitBounds(geoJsonLayer.getBounds())
gets called
Actual behavior: map.fitBounds(geoJsonLayer.getBounds())
is not called because call to geoJsonLayer.addData(json)
throws an exception
Other plugins would work better with this one together if it would use setLatLngs to update the geometry layers.
Specifically here: L.PM.Edit.Line.js:277
Markers need to be snappable to polygons and to other markers.
hi,
is there an option to change toolbar position? e.g. position: 'topright'. thanks!
When the following CSS from the Demo isn't included the markers obviously won't show up
.marker-icon, .marker-icon:focus {
background-color: #ffffff;
border: 1px solid #3388FF;
border-radius: 50%;
margin: -7px 0 0 -7px !important;
width: 14px !important;
height: 14px !important;
outline: 0;
}
So.. create a /dist
folder and put .css and .js in there
Like with a press of shift
or alt
during drag, snapping should be disabled.
Mainly an "Edit" event.
When new layer contents is added after the pm
plugin was initialized, it does not handle pm:edit
events for newly added elements.
Like this:
var geoJsonLayer = L.geoJson().addTo(map);
geoJsonLayer.addData(json);
geoJsonLayer.addEventListener('click', function() {
geoJsonLayer.pm.toggleEdit();
});
Clicking on the geoJsonLayer
does not enter the edit mode
AFAIK it's currently not possible to pass custom styles for polygons, polylines & markers.
So as soon as I create an element, it gets the leaflet default style. Is it possible to define some custom styles, so that they get applied on creation?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.