How do I pass options in to a Handler in Leaflet JS? - leaflet

Question

Using leaflet 1.0.2, I have been following the tutorial Extending Leaflet: Handlers and Controls and I am building my own handler to draw a "bounding box" on the map.
So far this works very well, see the following example "pseudo" code:
L.BoundingBoxHandler = L.Handler.extend({
colour: '#0000FF',
rectangle: null,
addHooks: function () {
L.DomEvent.on(this._map._container, 'mousedown', this.start, this);
L.DomEvent.on(this._map._container, 'mousemove', this.mouseMove, this);
L.DomEvent.on(this._map._container, 'mouseup', this.mouseUp, this);
},
removeHooks: function () {
L.DomEvent.off(this._map._container, 'mousedown', this.start, this);
L.DomEvent.off(this._map._container, 'mousemove', this.mouseMove, this);
L.DomEvent.off(this._map._container, 'mouseup', this.mouseUp, this);
},
start: function (ev: MouseEvent) {
// get the lat long bounds of the mouse then draw a rectangle
this.rectangle = L.rectangle(latLngBounds, { color: this.colour,
weight: 2 }).addTo(this._map);
},
mouseMove: function (ev: MouseEvent) {
// code that gets the current location of mouse
// and calls setBounds on the rectangle...
},
mouseUp: function (ev: MouseEvent) {
// remove the bounding box
this.rectangle.remove();
}
});
I am adding the handler to the map by calling:
map.addHandler('boundy', L.BoundingBoxHandler);
In the code example, you can see that I have a variable called "colour" which determines the colour of the rectangle.
I would like to pass this colour in as an option when I create the handler, so that I can change the colour of the rectangle.
How do I pass in options when I create the handler in Leaflet JS?

Answer 1

How do I pass in options when I create the handler in Leaflet JS?
You don't. 😊
Look at how the default map handlers work: the use the map options to define their own behaviour.
For example, the code for the ScrollWheelZoom handler defines the following options in the map:
An implicit scrollWheelZoom option for enabling/disabling the handler when the map is instantiated.
wheelDebounceTime and wheelPxPerZoomLevel options for the behaviour of the handler.
It is perfectly OK for a handler to define new map options, as long as the names don't collide with the existing ones.
So if you've got a BoundingBox handler, you probably want to have an implicit boundingBox option and something like a boundingBoxStyle option, both as map options.