Leaflet.ZoomBox/L.Control.ZoomBox.js at main · consbio/Leaflet.ZoomBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
L.Control.ZoomBox = L.Control.extend({
    _active: false,
    _map: null,
    includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
    options: {
        position: 'topleft',
        addToZoomControl: false,
        content: "",
        className: "leaflet-zoom-box-icon",
        modal: false,
        title: "Zoom to specific area"
    },
    onAdd: function (map) {
        this._map = map;
        var separate_container = !map.zoomControl || !this.options.addToZoomControl;
        if (!separate_container) {
            this._container = map.zoomControl._container;
        } else {
            this._container = L.DomUtil.create('div', 'leaflet-zoom-box-control leaflet-bar');
        }
        this._link = L.DomUtil.create('a', this.options.className, this._container);
        this._link.title = this.options.title;
        this._link.innerHTML = this.options.content || "";
        this._link.href = "#";
        this._link.setAttribute('role', 'button');
        this._link.setAttribute('aria-pressed', 'false');

        // Bind to the map's boxZoom handler
        var _origMouseDown = map.boxZoom._onMouseDown;
        map.boxZoom._onMouseDown = function(e){
            if (e.button === 2) return;  // prevent right-click from triggering zoom box
            _origMouseDown.call(map.boxZoom, {
                clientX: e.clientX,
                clientY: e.clientY,
                which: 1,
                shiftKey: true
            });
        };

        map.on('zoomend', function(){
            if (map.getZoom() == map.getMaxZoom()){
                L.DomUtil.addClass(this._link, 'leaflet-disabled');
                this._link.setAttribute('aria-disabled', 'true');
            }
            else {
                L.DomUtil.removeClass(this._link, 'leaflet-disabled');
                this._link.removeAttribute('aria-disabled');
            }
        }, this);
        if (!this.options.modal) {
            map.on('boxzoomend', this.deactivate, this);
        }

        L.DomEvent
            .on(this._link, 'dblclick', L.DomEvent.stop)
            .on(this._link, 'click', L.DomEvent.stop)
            .on(this._link, 'mousedown', L.DomEvent.stopPropagation)
            .on(this._link, 'click', function(){
                this._active = !this._active;
                if (this._active && map.getZoom() != map.getMaxZoom()){
                    this.activate();
                }
                else {
                    this.deactivate();
                }
            }, this);
        return this._container;
    },
    activate: function() {
        L.DomUtil.addClass(this._link, 'active');
        this._map.dragging.disable();
        this._map.boxZoom.addHooks();
        L.DomUtil.addClass(this._map.getContainer(), 'leaflet-zoom-box-crosshair');
        this._link.setAttribute('aria-pressed', 'true');
    },
    deactivate: function() {
        L.DomUtil.removeClass(this._link, 'active');
        this._map.dragging.enable();
        this._map.boxZoom.removeHooks();
        L.DomUtil.removeClass(this._map.getContainer(), 'leaflet-zoom-box-crosshair');
        this._active = false;
        this._link.setAttribute('aria-pressed', 'false');
    }
});

L.control.zoomBox = function (options) {
  return new L.Control.ZoomBox(options);
};