From 6619b777e353cbdfdcc6f7ac0e77f8bca9f78656 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Mon, 10 Jun 2013 16:31:25 -0700 Subject: [PATCH] Customize and style map zoom controls --- app/assets/javascripts/index.js | 3 +- app/assets/javascripts/leaflet.customzoom.js | 76 ++++++++++++++++++++ app/assets/stylesheets/leaflet.pan.css.scss | 41 ----------- app/assets/stylesheets/leaflet.zoom.css.scss | 56 --------------- 4 files changed, 78 insertions(+), 98 deletions(-) create mode 100644 app/assets/javascripts/leaflet.customzoom.js delete mode 100644 app/assets/stylesheets/leaflet.pan.css.scss diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 60f88380d..d50253318 100644 --- 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 index 000000000..78b19f6ff --- /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 index 4b5aa65be..000000000 --- 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 66f464a9e..8b1378917 100644 --- 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; - } -} -- 2.43.2