w8r / leaflet-area-select

Control to just select an area and provide bbox for it

leaflet-area-select

Control to just select an area and provide bbox for it

Demo

Include

Browserify, Webpack

npm install --save leaflet-area-select

var SelectArea = require("leaflet-area-select");
// or
import SelectArea from "leaflet-area-select";

Browser

<script type="text/javascript" src="path/to/Map.SelectArea.min.js"></script>

Usage

Including the handler into the project will automatically add it to the L.Map, so to enable/disable it you can use methods:

let map = new L.Map("map", {
    selectArea: true, // will enable it by default
});

// or
map.selectArea.enable();

map.on("areaselected", (e) => {
    console.log(e.bounds.toBBoxString()); // lon, lat, lon, lat
});

// You can restrict selection area like this:
const bounds = map.getBounds().pad(-0.25); // save current map bounds as restriction area
// check restricted area on start and move
map.selectArea.setValidate((layerPoint) => {
    return bounds.contains(this._map.layerPointToLatLng(layerPoint));
});

// now switch it off
map.selectArea.setValidate();

Key-strokes

// dragging will be enabled and you can
// start selecting with Ctrl key pressed
map.selectArea.setControlKey(true);

// box-zoom will be disabled and you can
// start selecting with Shift key pressed
map.selectArea.setControlKey(true);

License

MIT

leaflet-area-select's Issues

Cannot read property '_simulated' of undefined from _onKeyPress

Raised when event handler calls

this._map.dragging._draggable._onUp(); // hardcore

latest version of onUp is checking property of event. Suggest passing existing e or empty object down.

when map/window lost focus, unable to select area

Hi,

first of all, thank you for this plugin!
Steps to reproduce:

• enable area selection and select area;
• change browser window or application;
• return back and select an area on the map.

It seems to be impossible to select an area again, until I disable and re-enable the area-selection. Only a small blue point appears where I clicked to start dragging. The same in demo version in website on my browser (Chrome 56).
Thank you!

does not work with touch devices

No selection box appears. Is it in the roadmap?

Is this library supported and/or is going to be enhanced? @w8r
Thank you

import for angular 4.0.0

this does not work for angular 4.0.0 and @angular/cli
import SelectArea from 'leaflet-area-select';

following works, but only with a not really pretty hack
import * as L from 'leaflet';
import 'leaflet-area-select';

webpack integrated in ng does not compile otherwise
let map2 = (map as any);
map2.selectArea.enable();

Documentation For Changing Trigger Key Is Wrong

Getting map.selectArea.setCtrlKey() is not a function.

I believe the example code in the documentation should be map.selectArea.setControlKey(true) and map.selectArea.setShiftKey(true)

Mac Cmd key support

Hi Team
When we enable the control for the multiselect, it works with the control key on mac aswell. The issue is that , on mac, if you click control key and then touch the touchpad, it thinks its a right click and the right click action is triggered.
So an ideal solutions to this I think is to include cmd key support on mac and keep the control key support on windows .

Are we planning to fix this any time soon as I need this support for my project?

Cannot read property '_simulated' of undefined using leaflet master version

I recently updated my leaflet version (1.0.0-rc.1+e2caf40) and it triggered a problem with this plugin. It was very easy to figure out the problem so I'll leave the solution here hoping that it will help others.

Line 300:

_onKeyPress: function(e) {
    if (this.options.ctrlKey && (e.ctrlKey || e.type === 'dragstart')
      && this._beforeCursor === null) {

      this._setCursor();
      this._map.dragging._draggable._onUp(); // hardcore
      this._map.dragging.disable();
    }
  },

The _onUp function apparenly now requires an event parameter so I just passed "e" to it and it seems to be working just fine.

this._map.dragging._draggable._onUp(e); // hardcore

I'm not sure this is the optimal solution but everything appears to be working fine.

Question.

Does this work with geoJson polygons without any problem?

not working in react 18.2.0

when i draw on map i got this error:
Unhandled Runtime Error
TypeError: Cannot use 'in' operator to search for '_leaflet_id' in

i use this versions of react and react-leaflet:
"leaflet": "^1.8.0",
"leaflet-selectareafeature": "^0.1.4"
"react": "18.2.0"
"react-dom": "18.2.0"
"react-leaflet": "^4.0.1"

Dragend still fires popups for features

When dragging the box, on mouse up the popup still fires for the feature. Is there a way to turn this off?

It is strange, when dragging from SE to NW, it does not fire the popup, but any other direction does.

Edit: This is actually only happening with the almostOver plugin.

Import for angular 7.2.0

Hi,

I don't know if it's a good solution but that works.

In angular.json :

"scripts": [
              "node_modules/leaflet/dist/leaflet.js",
              "node_modules/leaflet-area-select/dist/Map.SelectArea.js"
],

After install @type/node

npm install @types/node --save`

And add to tsconfig.app.json :

    "types": [
      "node"
    ]

In map.component.ts add :

var L = require("leaflet")
var L2 = require("leaflet-area-select")

If you have a best solution I'm interested. :)