diff --git a/build/build.bat b/build/build.bat index fd493481..55c6a25e 100644 --- a/build/build.bat +++ b/build/build.bat @@ -37,9 +37,12 @@ java -jar ../lib/closure-compiler/compiler.jar ^ --js ../src/handler/ScrollWheelZoom.js ^ --js ../src/handler/DoubleClickZoom.js ^ --js ../src/handler/ShiftDragZoom.js ^ +--js ../src/control/Control.js ^ +--js ../src/control/Control.Zoom.js ^ --js ../src/map/Map.js ^ --js ../src/map/ext/Map.Geolocation.js ^ --js ../src/map/ext/Map.Popup.js ^ --js ../src/map/ext/Map.PanAnimation.js ^ --js ../src/map/ext/Map.ZoomAnimation.js ^ +--js ../src/map/ext/Map.Control.js ^ --js_output_file ../dist/leaflet.js \ No newline at end of file diff --git a/build/deps.js b/build/deps.js index d6463e83..0fd6496e 100644 --- a/build/deps.js +++ b/build/deps.js @@ -100,6 +100,14 @@ var deps = { desc: 'Enables zooming to bounding box by shift-dragging the map.' }, + ControlZoom: { + src: ['control/Control.js', + 'map/ext/Map.Control.js', + 'control/Control.Zoom.js'], + heading: 'Controls', + desc: 'Basic zoom control with two buttons (zoom in / zoom out).' + }, + MapAnimationNative: { src: ['dom/DomEvent.js', diff --git a/debug/control/map-control.html b/debug/control/map-control.html new file mode 100644 index 00000000..8d52bc98 --- /dev/null +++ b/debug/control/map-control.html @@ -0,0 +1,29 @@ + + + + Leaflet debug page + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/debug/include.js b/debug/include.js index c955d605..c8d23faa 100644 --- a/debug/include.js +++ b/debug/include.js @@ -48,11 +48,15 @@ 'handler/ScrollWheelZoom.js', 'handler/ShiftDragZoom.js', + 'control/Control.js', + 'control/Control.Zoom.js', + 'map/Map.js', 'map/ext/Map.Geolocation.js', 'map/ext/Map.Popup.js', 'map/ext/Map.PanAnimation.js', - 'map/ext/Map.ZoomAnimation.js' + 'map/ext/Map.ZoomAnimation.js', + 'map/ext/Map.Control.js' ]; for (var i = 0; i < scripts.length; i++) { diff --git a/dist/images/zoom-in.png b/dist/images/zoom-in.png new file mode 100644 index 00000000..9f473d64 Binary files /dev/null and b/dist/images/zoom-in.png differ diff --git a/dist/images/zoom-out.png b/dist/images/zoom-out.png new file mode 100644 index 00000000..f0a5b5d6 Binary files /dev/null and b/dist/images/zoom-out.png differ diff --git a/dist/leaflet.css b/dist/leaflet.css index 053c2c09..98856f0d 100644 --- a/dist/leaflet.css +++ b/dist/leaflet.css @@ -50,6 +50,72 @@ } +/* Leaflet controls */ + +.leaflet-top, +.leaflet-bottom { + position: absolute; + } +.leaflet-top { + top: 0; + } +.leaflet-right { + right: 0; + } +.leaflet-bottom { + bottom: 0; + } +.leaflet-left { + left: 0; + } +.leaflet-control { + float: left; + clear: both; + display: inline; + } +.leaflet-right .leaflet-control { + float: right; + } +.leaflet-top .leaflet-control { + margin-top: 10px; + } +.leaflet-bottom .leaflet-control { + margin-bottom: 10px; + } +.leaflet-left .leaflet-control { + margin-left: 10px; + } +.leaflet-right .leaflet-control { + margin-right: 10px; + } + +.leaflet-control-zoom { + padding: 5px; + background: rgba(0, 0, 0, 0.25); + + border-radius: 7px; + } +.leaflet-control-zoom a { + display: block; + width: 19px; + height: 19px; + background-position: 50% 50%; + background-repeat: no-repeat; + background-color: rgba(255, 255, 255, 0.75); + + border-radius: 4px; + } +.leaflet-control-zoom-in { + background-image: url(images/zoom-in.png); + margin-bottom: 5px; + } +.leaflet-control-zoom-out { + background-image: url(images/zoom-out.png); + } + + +/* Fade animations */ + .leaflet-tile { opacity: 0; @@ -61,7 +127,6 @@ .leaflet-tile-loaded { opacity: 1; } - .leaflet-popup { -webkit-transition: opacity 0.2s linear; diff --git a/dist/leaflet.js b/dist/leaflet.js index d23d610a..94f489f0 100644 --- a/dist/leaflet.js +++ b/dist/leaflet.js @@ -3,7 +3,7 @@ Leaflet is a BSD-licensed JavaScript library for map display and interaction. See http://cloudmade.github.com/Leaflet/ for more information. */ -var L={VERSION:"0.1a4",ROOT_URL:function(){for(var a=document.getElementsByTagName("script"),b=0,c=a.length;b=b.right||e.top>=b.bottom||e.bottom<=b.top)a[c].src="",a[c].parentNode.removeChild(a[c])}},_onZoomTransitionEnd:function(){this._restoreTileFront();var a=L.DomUtil.getPosition(this._mapPane);a=L.DomUtil.getTranslateString(a);this._resetView(this._animateToCenter,this._animateToZoom);this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY]=a+" "+this._tileBg.style[L.DomUtil.TRANSFORM_PROPERTY];this._mapPane.className=this._mapPane.className.replace(" leaflet-animating", -"");this._animatingZoom=!1},_restoreTileFront:function(){this._tilePane.style.visibility="";this._tilePane.style.zIndex=2;this._tileBg.style.zIndex=1}}); +"");this._animatingZoom=!1},_restoreTileFront:function(){this._tilePane.style.visibility="";this._tilePane.style.zIndex=2;this._tileBg.style.zIndex=1}});L.Map.include({_initControlPos:function(){var a=this._controlCorners={},b=L.DomUtil.create("div","leaflet-control-container",this._container);a.topLeft=L.DomUtil.create("div","leaflet-top leaflet-left",b);a.topRight=L.DomUtil.create("div","leaflet-top leaflet-right",b);a.bottomLeft=L.DomUtil.create("div","leaflet-bottom leaflet-left",b);a.bottomRight=L.DomUtil.create("div","leaflet-bottom leaflet-right",b)},addControl:function(a){a.onAdd(this);var b=a.getPosition(),c=this._controlCorners[b];a=a.getContainer(); +L.DomUtil.addClass(a,"leaflet-control");b.indexOf("bottom")!=-1?c.insertBefore(a,c.firstChild):c.appendChild(a)},removeControl:function(){var a=this._controlCorners[control.getPosition()],b=control.getContainer();a.removeChild(b);if(control.onRemove)control.onRemove(this)}}); diff --git a/src/control/Control.Zoom.js b/src/control/Control.Zoom.js new file mode 100644 index 00000000..865410d7 --- /dev/null +++ b/src/control/Control.Zoom.js @@ -0,0 +1,37 @@ + +L.Control.Zoom = L.Class.extend({ + onAdd: function(map) { + this._map = map; + this._container = L.DomUtil.create('div', 'leaflet-control-zoom'); + + this._zoomInButton = this._createButton( + 'Zoom in', 'leaflet-control-zoom-in', this._map.zoomIn, this._map); + this._zoomOutButton = this._createButton( + 'Zoom out', 'leaflet-control-zoom-out', this._map.zoomOut, this._map); + + this._container.appendChild(this._zoomInButton); + this._container.appendChild(this._zoomOutButton); + }, + + getContainer: function() { + return this._container; + }, + + getPosition: function() { + var pos = L.Control.Position; + return L.Browser.mobileWebkit ? pos.BOTTOM_LEFT : pos.TOP_LEFT; + }, + + _createButton: function(title, className, fn, context) { + var link = document.createElement('a'); + link.href = '#'; + link.title = title; + link.className = className; + + L.DomEvent.disableClickPropagation(link); + L.DomEvent.addListener(link, 'click', L.DomEvent.preventDefault); + L.DomEvent.addListener(link, 'click', fn, context); + + return link; + } +}); \ No newline at end of file diff --git a/src/control/Control.js b/src/control/Control.js new file mode 100644 index 00000000..a01c6807 --- /dev/null +++ b/src/control/Control.js @@ -0,0 +1,9 @@ + +L.Control = {}; + +L.Control.Position = { + TOP_LEFT: 'topLeft', + TOP_RIGHT: 'topRight', + BOTTOM_LEFT: 'bottomLeft', + BOTTOM_RIGHT: 'bottomRight' +}; \ No newline at end of file diff --git a/src/map/ext/Map.Control.js b/src/map/ext/Map.Control.js new file mode 100644 index 00000000..78e5cdd3 --- /dev/null +++ b/src/map/ext/Map.Control.js @@ -0,0 +1,44 @@ +L.Map.include({ + _initControlPos: function() { + var corners = this._controlCorners = {}, + classPart = 'leaflet-', + top = classPart + 'top', + bottom = classPart + 'bottom', + left = classPart + 'left', + right = classPart + 'right', + controlContainer = L.DomUtil.create('div', classPart + 'control-container', this._container); + + corners.topLeft = L.DomUtil.create('div', top + ' ' + left, controlContainer); + corners.topRight = L.DomUtil.create('div', top + ' ' + right, controlContainer); + corners.bottomLeft = L.DomUtil.create('div', bottom + ' ' + left, controlContainer); + corners.bottomRight = L.DomUtil.create('div', bottom + ' ' + right, controlContainer); + }, + + addControl: function(control) { + control.onAdd(this); + + var pos = control.getPosition(), + corner = this._controlCorners[pos], + container = control.getContainer(); + + L.DomUtil.addClass(container, 'leaflet-control'); + + if (pos.indexOf('bottom') != -1) { + corner.insertBefore(container, corner.firstChild); + } else { + corner.appendChild(container); + } + }, + + removeControl: function(conrol) { + var pos = control.getPosition(), + corner = this._controlCorners[pos], + container = control.getContainer(); + + corner.removeChild(container); + + if (control.onRemove) { + control.onRemove(this); + } + } +}); \ No newline at end of file