app/assets/javascripts/leaflet.zoom.js

   1 L.OSM.Zoom = L.Control.extend({
   2   options: {
   3     position: "topright"
   4   },
   5
   6   onAdd: function (map) {
   7     const zoomName = "zoom",
   8           container = L.DomUtil.create("div", zoomName);
   9
  10     this._map = map;
  11
  12     this._zoomInButton = this._createButton(
  13       "", OSM.i18n.t("javascripts.map.zoom.in"), zoomName + "in", container, this._zoomIn, this);
  14     this._zoomOutButton = this._createButton(
  15       "", OSM.i18n.t("javascripts.map.zoom.out"), zoomName + "out", container, this._zoomOut, this);
  16
  17     map.on("zoomend zoomlevelschange", this._updateDisabled, this);
  18
  19     return container;
  20   },
  21
  22   onRemove: function (map) {
  23     map.off("zoomend zoomlevelschange", this._updateDisabled, this);
  24   },
  25
  26   _zoomIn: function (e) {
  27     this._map.zoomIn(e.shiftKey ? 3 : 1);
  28   },
  29
  30   _zoomOut: function (e) {
  31     this._map.zoomOut(e.shiftKey ? 3 : 1);
  32   },
  33
  34   _createButton: function (html, title, className, container, fn, context) {
  35     const link = L.DomUtil.create("a", "control-button " + className, container);
  36     link.innerHTML = html;
  37     link.href = "#";
  38     link.title = title;
  39
  40     $(L.SVG.create("svg"))
  41       .append($(L.SVG.create("use")).attr("href", "#icon-" + className))
  42       .attr("class", "h-100 w-100")
  43       .appendTo(link);
  44
  45     const stop = L.DomEvent.stopPropagation;
  46
  47     L.DomEvent
  48       .on(link, "click", stop)
  49       .on(link, "mousedown", stop)
  50       .on(link, "dblclick", stop)
  51       .on(link, "click", L.DomEvent.preventDefault)
  52       .on(link, "click", fn, context);
  53
  54     return link;
  55   },
  56
  57   _updateDisabled: function () {
  58     const map = this._map,
  59           className = "disabled";
  60
  61     L.DomUtil.removeClass(this._zoomInButton, className);
  62     L.DomUtil.removeClass(this._zoomOutButton, className);
  63
  64     if (map._zoom === map.getMinZoom()) {
  65       L.DomUtil.addClass(this._zoomOutButton, className);
  66     }
  67     if (map._zoom === map.getMaxZoom()) {
  68       L.DomUtil.addClass(this._zoomInButton, className);
  69     }
  70   }
  71 });
  72
  73 L.OSM.zoom = function (options) {
  74   return new L.OSM.Zoom(options);
  75 };