leaflet.zoomhome/index.js at master · zerowastemap/leaflet.zoomhome · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
 * Forked Leaflet-plugin that provides a zoom control with a "Home" button to reset the view
 * @link https://github.com/torfsen/leaflet.zoomhome
 */

(function (factory, window) {
  // see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders
  // for details on how to structure a leaflet plugin.

  // define an AMD module that relies on 'leaflet'
  if (typeof define === 'function' && define.amd) {
    define(['leaflet'], factory)

    // define a Common JS module that relies on 'leaflet'
  } else if (typeof exports === 'object') {
    if (typeof window !== 'undefined' && window.L) {
      module.exports = factory(L)
    } else {
      module.exports = factory(require('leaflet'))
    }
  }

  // attach your plugin to the global 'L' variable
  if (typeof window !== 'undefined' && window.L) {
    window.L.Control.ZoomHome = factory(L)
  }
}(function (L) {
  const ZoomHome = L.Control.extend({
    options: {
      position: 'verticalcenterright',
      zoomInText: '+',
      zoomInTitle: 'Zoom in',
      zoomOutText: '-',
      zoomOutTitle: 'Zoom out',
      zoomHomeTitle: 'Zoom home',
      zoomHomeText: `
        <svg viewBox="0 0 16 16" class="icon icon-mini icon-home">
          <use xlink:href="#icon-home" />
        </svg>
      `
    },

    initialize: function (options) {
      L.Util.setOptions(this, options)
    },

    onAdd: function (map) {
      const controlName = 'gin-control-zoom'
      const container = L.DomUtil.create('div', controlName + ' leaflet-bar')
      const options = this.options

      this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
        controlName + '-in', container, this._zoomIn)
      this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
        controlName + '-home', container, this._zoomHome)
      this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
        controlName + '-out', container, this._zoomOut)

      this._updateDisabled()
      map.on('zoomend zoomlevelschange', this._updateDisabled, this)

      return container
    },

    onRemove: function (map) {
      map.off('zoomend zoomlevelschange', this._updateDisabled, this)
    },

    _zoomIn: function (e) {
      this._map.zoomIn(e.shiftKey ? 3 : 1)
    },

    _zoomOut: function (e) {
      this._map.zoomOut(e.shiftKey ? 3 : 1)
    },

    _zoomHome: function (e) {
      this._map.fire('zoomhome')
    },

    _createButton: function (html, title, className, container, fn) {
      const link = L.DomUtil.create('a', className, container)
      link.innerHTML = html
      link.href = '#'
      link.title = title

      L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
        .on(link, 'click', L.DomEvent.stop)
        .on(link, 'click', fn, this)
        .on(link, 'click', this._refocusOnMap, this)

      return link
    },

    _updateDisabled: function () {
      const map = this._map
      const className = 'leaflet-disabled'

      L.DomUtil.removeClass(this._zoomInButton, className)
      L.DomUtil.removeClass(this._zoomOutButton, className)

      if (map._zoom === map.getMinZoom()) {
        L.DomUtil.addClass(this._zoomOutButton, className)
      }
      if (map._zoom === map.getMaxZoom()) {
        L.DomUtil.addClass(this._zoomInButton, className)
      }
    }
  })

  return ZoomHome
}, window))