Customize and style map zoom controls

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 60f88380d912e8847050232997d8e6cf3f76ee22..d50253318a5a6a96adbb90b4d806ea54bcf979d6 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -3,6 +3,7 @@
 //= require leaflet.share
 //= require leaflet.note
 //= require leaflet.locate
+//= require leaflet.customzoom
 //= require index/browse
 //= require index/export
 //= require index/key
@@ -57,7 +58,7 @@ $(document).ready(function () {
     map.invalidateSize();
   });
 
-  L.control.zoom({position: 'topright'})
+  L.control.customZoom({position: 'topright'})
     .addTo(map);
 
   L.OSM.layers({position: 'topright', layers: layers})

diff --git a/app/assets/javascripts/leaflet.customzoom.js b/app/assets/javascripts/leaflet.customzoom.js
new file mode 100644 (file)
index 0000000..78b19f6
--- /dev/null
+++ b/app/assets/javascripts/leaflet.customzoom.js
@@ -0,0 +1,76 @@
+/*
+ * L.Control.CustomZoom is used for the default zoom buttons on the map.
+ */
+
+L.Control.CustomZoom = L.Control.extend({
+       options: {
+               position: 'topleft'
+       },
+
+       onAdd: function (map) {
+               var zoomName = 'zoom',
+                   container = L.DomUtil.create('div', zoomName);
+
+               this._map = map;
+
+               this._zoomInButton  = this._createButton(
+                       '', 'Zoom in',  zoomName + 'in',  container, this._zoomIn,  this);
+               this._zoomOutButton = this._createButton(
+                       '', 'Zoom out', zoomName + 'out', container, this._zoomOut, this);
+
+               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);
+       },
+
+       _createButton: function (html, title, className, container, fn, context) {
+               var link = L.DomUtil.create('a', className, container);
+               link.innerHTML = html;
+               link.href = '#';
+               link.title = title;
+
+               var sprite = L.DomUtil.create('span', 'icon ' + className, link);
+
+               var stop = L.DomEvent.stopPropagation;
+
+               L.DomEvent
+                   .on(link, 'click', stop)
+                   .on(link, 'mousedown', stop)
+                   .on(link, 'dblclick', stop)
+                   .on(link, 'click', L.DomEvent.preventDefault)
+                   .on(link, 'click', fn, context);
+
+               return link;
+       },
+
+       _updateDisabled: function () {
+               var map = this._map,
+                       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);
+               }
+       }
+});
+
+L.control.customZoom = function (options) {
+       return new L.Control.CustomZoom(options);
+};

diff --git a/app/assets/stylesheets/leaflet.pan.css.scss b/app/assets/stylesheets/leaflet.pan.css.scss
deleted file mode 100644 (file)
index 4b5aa65..0000000
--- a/app/assets/stylesheets/leaflet.pan.css.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.leaflet-control-pan-up,
-.leaflet-control-pan-down,
-.leaflet-control-pan-left,
-.leaflet-control-pan-right {
-  background-image: image-url("map_sprite.png");
-  position: absolute;
-  background-repeat: no-repeat;
-  cursor: hand;
-  cursor: pointer;
-}
-
-.leaflet-control-pan-up {
-  left: 10px;
-  width: 25px;
-  height: 13px;
-  background-position: -15px -5px;
-}
-
-.leaflet-control-pan-down {
-  left: 10px;
-  top: 36px;
-  width: 25px;
-  height: 15px;
-  background-position: -15px -40px;
-}
-
-.leaflet-control-pan-left {
-  left: 0px;
-  top: 13px;
-  width: 25px;
-  height: 24px;
-  background-position: -5px -17px;
-}
-
-.leaflet-control-pan-right {
-  left: 25px;
-  top: 13px;
-  width: 25px;
-  height: 24px;
-  background-position: -30px -17px;
-}

diff --git a/app/assets/stylesheets/leaflet.zoom.css.scss b/app/assets/stylesheets/leaflet.zoom.css.scss
index 66f464a9e78ab015820062145c280b223f1df5e8..8b137891791fe96927ad78e64b0aad7bded08bdc 100644 (file)
--- a/app/assets/stylesheets/leaflet.zoom.css.scss
+++ b/app/assets/stylesheets/leaflet.zoom.css.scss
@@ -1,57 +1 @@
-.leaflet-control-zoomslider {
-  .leaflet-control-zoomslider-in,
-  .leaflet-control-zoomslider-out,
-  .leaflet-control-zoomslider-slider,
-  .leaflet-control-zoomslider-slider-knob {
-    background-image: image-url("map_sprite.png");
-    position: absolute;
-    background-repeat: no-repeat;
-    cursor: hand;
-    cursor: pointer;
-  }
 
-  .leaflet-control-zoomslider-in,
-  .leaflet-control-zoomslider-out {
-    text-indent: 26px;
-    overflow: hidden;
-    outline-style: none;
-    border: 0;
-    background-color: transparent;
-  }
-
-  .leaflet-control-zoomslider-in {
-    top: 50px;
-    width: 26px;
-    height: 20px;
-    left: 10px;
-    background-position: -15px -61px;
-  }
-
-  .leaflet-control-zoomslider-out {
-    top: 202px;
-    width: 26px;
-    height: 20px;
-    left: 10px;
-    background-position: -15px -220px;
-  }
-
-  .leaflet-control-zoomslider-slider {
-    top: 70px;
-    width: 26px;
-    height: 132px;
-    left: 10px;
-    background-position: -15px -84px;
-  }
-
-  .leaflet-control-zoomslider-slider-knob {
-    top: 0px;
-    width: 25px;
-    height: 10px;
-    -webkit-transition: top 100ms linear;
-    -moz-transition: top 100ms linear;
-    -o-transition: top 100ms linear;
-    background-position: -77px -58px;
-    pointer: move;
-    cursor: move;
-  }
-}