zakjan / leaflet-lasso Goto Github PK

I have a test project at https://github.com/ericg-vue-questions/leaflet-test/tree/feature-lasso-france-behavior

(note the feature-lasso-france-behavior branch)

If I draw a lassoed area around France, the France does not show up in the list of selected objects. No other nation behaves this way.

If I draw a small intersecting area with France, France will show up in the list of selected objects.

I have included in the repo a geojson file containing only France. Just change the line in LeafletTest.vue from:

import data from './custom.geo.json';

to

import data from './france.geo.json';

The data comes from https://geojson-maps.ash.ms with the following selections:

I will continue to work on trying to figure out what is happening, but was hoping you would have some idea why it was failing in this case.

Hi, I want to change the selection mode. As it is now a free hand draw selection which selects all polygons with in it, I want to change that to polygon like I can draw a polygon or a rectangle to select some layer. Is there any option for it.

I am working on a prototype to select from zip/postal code features. Currently I am only loading the data for one state. After the lasso selection is done, even for a small selection, there is about a 10s lag until the lasso.finished event is fired.

Attached example.
example.zip

I cannot state enough, how much your work helped me setting-up the environment and overcome obstacles while refactoring my plug-in (Leaflet.Geodesic).

Many, many thanks for sharing this!

Thanks for uploading a new version! But why works the lasso only with the right mouse button and not with the left mouse button? That is very confusing in the first moment.

And while drawing with the right mouse button and then clicking with the left mouse button, the lasso polygon are not removed from the map.

leaflet-lasso.umd.js:967 Uncaught ReferenceError: j is not defined
at Polygon.Primitive.within (leaflet-lasso.umd.js:967)
at Polygon.Primitive.intersects (leaflet-lasso.umd.js:1039)
at leaflet-lasso.umd.js:1591
at Array.filter ()
at getLayersInPolygon (leaflet-lasso.umd.js:1566)
at LassoHandler.finish (leaflet-lasso.umd.js:1734)
at LassoHandler.onDocumentMouseUp (leaflet-lasso.umd.js:1714)
Primitive.within @ leaflet-lasso.umd.js:967
Primitive.intersects @ leaflet-lasso.umd.js:1039
(anonymous) @ leaflet-lasso.umd.js:1591
getLayersInPolygon @ leaflet-lasso.umd.js:1566
LassoHandler.finish @ leaflet-lasso.umd.js:1734
LassoHandler.onDocumentMouseUp @ leaflet-lasso.umd.js:1714
leaflet-lasso.umd.js:1707 mouseup event was missed
LassoHandler.onDocumentMouseMove @ leaflet-lasso.umd.js:1707

I added var j = 0; after line 966 to resolve the error, now it's okay.

Add a Leaflet control to enable lasso selection

Depends on #4

Currently leaflet-lasso uses circle-to-polygon, because Terraformer.Circle produces invalid radius, see Esri/terraformer#321

If this bug in Terraformer is fixed, circle-to-polygon dependency can be removed.

Is there any way to remove # sign on click as it's creates issue with page with vertical scroll.

I have a code pen demonstrating the issue at https://codepen.io/ericg_off/pen/JjLGWLw

I am using:

• https://unpkg.com/[email protected]/dist/leaflet.js
• https://unpkg.com/[email protected]/dist/leaflet-lasso.umd.min.js
• https://unpkg.com/@elfalem/[email protected]/dist/leaflet.curve.js

To reproduce:

1. Click on the lasso control in the upper right corner.
2. Draw a lasso around the markers

The following error will appear:

t-spatial.esm.js:522 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at t (t-spatial.esm.js:522:15)
    at calc.ts:6:20
    at Array.filter (<anonymous>)
    at U (calc.ts:58:35)
    at e.finish (lasso-handler.ts:189:34)
    at e.onDocumentMouseUp (lasso-handler.ts:151:14)
t @ t-spatial.esm.js:522
(anonymous) @ calc.ts:6
U @ calc.ts:58
e.finish @ lasso-handler.ts:189
e.onDocumentMouseUp @ lasso-handler.ts:151


iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js:1 mouseup event was missed

I am not sure if the actual bug is in the lasso code or in the curve code.

Support selecting also other layer types, not just markers

Library that can be used for polygons: @turf/intersect

Hello,

There is a closed issue:
#27

where you added support for touch devices by adding touch events to the map container (thank you!)

This works great with leaflet version 1.5.1 (your demo link uses this version of leaflet)

Unfortunately when you uptick the version of leaflet to anything above 1.5.1 the touch events no longer work on mobile / tablet touchscreen devices

Here is the change log for leaflet:
https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md

Would you be able to point me in the right direction to resolve this as we are using Leaflet 1.7.1 and can not go down to version 1.5.1.

Any help would be greatly appreciated.

Thanks,
-Chris Bucher

While drawing the lasso, click the right mouse button. The lasso polygon are not removed from the map.

Maybe you should filter layers to those that are in map bounds because there is no need to loop through all layers that are not in view.

Hi,

we had a problem with a missing semicolon in your dependencies:

https://github.com/gabzim/circle-to-polygon

I've already done a pull-request with was merged and a new release was done with version: 2.0.2. Could you please update that dependency so we could use leaflet-lasso with IE11 and Angular?! :)

Best regards,
Jan

Hi there,

first of all, thank you so much for you're great leaflet plugin. I'm using it in Angular with Typescript and with 2.0.8 i get the following error:

ERROR in node_modules/leaflet-lasso/dist/lasso-control.d.ts(1,8): error TS1192: Module '"node_modules/@types/leaflet/index"' has no default export.
    node_modules/leaflet-lasso/dist/lasso-handler.d.ts(1,8): error TS1192: Module '"node_modules/@types/leaflet/index"' has no default export.
    node_modules/leaflet-lasso/dist/lasso-polygon.d.ts(1,8): error TS1192: Module '"node_modules/@types/leaflet/index"' has no default export.

as far as I know you have to write the import for leaflet like this:

import * as L from 'leaflet';

because leaflet (even with version 1.6.0) does not have a default export in their module configuration. Could you check that?

Best regards,
Jan

Hi, after updating to 2.2.13 (from 2.2.12) I see in 2/2 projects the following error

Error: export 'LassoHandler' (imported as 'LassoHandler') was not found in 'leaflet-lasso' (module has no exports)

Error: export 'FINISHED_EVENT' (imported as 'FINISHED_EVENT') was not found in 'leaflet-lasso' (module has no exports)

Error: export 'FINISHED_EVENT' (imported as 'FINISHED_EVENT') was not found in 'leaflet-lasso' (module has no exports)

In type definitions I see these are exported, but maybe some config is invalid.

This package works great! Thank you!

Is there an option to turn off the default control lasso button in the top right corner to replace it entirely with a custom button?

This library works great with normal leaflet circleMarkers, but I need to have different shaped markers on my map so am using https://github.com/rowanwins/Leaflet.SvgShapeMarkers
I get this error on lasso.finished:
t-spatial.esm.js:522
Uncaught TypeError: Cannot read property 'type' of undefined
at t (t-spatial.esm.js:522)
at calc.ts:6
at Array.filter ()
at I (calc.ts:58)
at o.finish (lasso-handler.ts:184)
at o.onDocumentMouseUp (lasso-handler.ts:146)
t @ t-spatial.esm.js:522
(anonymous) @ calc.ts:6
I @ calc.ts:58
o.finish @ lasso-handler.ts:184
o.onDocumentMouseUp @ lasso-handler.ts:146

lasso-handler.ts:134
mouseup event was missed

Thanks in advance.

I need to integrate touch support for this tool, I have some ideas but as I'm new to plugin dev for leaflet I was wondering if you had particular recommendations on how to accomplish this? Just merely adding touch events to the existing handlers doesn't work, so I'll have to dig in more.

Marker clusters rendering change to simple markers when lasso is enabled. They should stay as marker clusters. I'm not sure when this bug started. Investigate potential incompatibility with newer Leaflet / MarkerCluster versions.

I am running into intermittent issue when selecting a cluster, single markers work ok. When selecting a cluster Im getting ...

Uncaught TypeError: Cannot read properties of undefined (reading '_content')
mouseup event was missed (lasso-handler.ts:134)

here is my code in creating the layer...

function createMarkerLayer(layerName, groupName, dataMatrix) {
    var markers = new L.markerClusterGroup({
	maxClusterRadius:30
	});
	var markerList = [];
    $.each(dataMatrix, function(i) {
	
	var splitData = dataMatrix[i][0].qText.split("|");
	var a = splitData[1].split(",");
	if (a[0] !== "" || a[1] !== "") {
	var title = splitData[2] + "<br>" + splitData[0] + "<br>" + layerName;
	var marker = L.marker(L.latLng(a[1], a[0]), { title: title });
	marker.bindPopup(title);
	markerList.push(marker);
	}
    });

	markers.addLayers(markerList);
	control.addOverlay( markers, layerName, {groupName : groupName, expanded: true} );

}

Any help would be greatly appreciated.

hi!
there is a project that has too many layers, leaflet-lasso needs 10~20s until the lasso selection is done.
so, is there a option that make lasso just pick selected layer in the given layers，instead of the map's all layers.

thanks!!!

For example: https://geoffboeing.com/2016/10/r-tree-spatial-index-python/

Related to #24

Hi,
I am not getting the correct selected layer count when using along with a cluster.

Find a suitable icon for a button

In relation to the discussion in #20.

This library works great on desktops. However, is there any workaround allowing it to work properly on touch devices without changing the code?

I could solve this with a code snippet from here Leaflet/Leaflet#1542 plus replacing mouse* events with pointer* events after checking a discussion in this Leaflet PR Leaflet/Leaflet#3375, pointer DOM events should be preferred.
Leaflet (as of version 1.7-dev) still does not allow to listen to neither pointer* nor touch* events with map.on and map.off methods.

Changes I have done are in my fork. This works fine as you can see below, I've tested with iPad (finger and Apple Pencil), as well as on iPhone:
https://codesandbox.io/s/leaflet-lasso-touch-jmb2b

My questions are:

1. Are there any other ways to make touch devices work with leaflet-lasso?
2. Does it make sense to bring optional switch to pointer events listeners to leaflet-lasso?

I am happy to contribute to the project, I am just not sure which way is reasonable.

Thanks for any hint.

Current UMD bundle size is 60K (24K minified). Chrome DevTools Coverage tab reports 42.6% unused code, so in theory it could be lowered down up to 26K (10K minified) with the same dependencies.

I couldn't make Rollup tree-shaking working any better yet.