cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

control positioning, basic zoom control, update build

Browse Source
This commit is contained in:
Mourner 2011-04-11 15:49:15 +03:00
parent 78580ba9ba
commit a204511fbe
11 changed files with 206 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/build.bat
View File

@ -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

8
build/deps.js
View File

@ -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',

29
debug/control/map-control.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../include.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map').addLayer(cloudmade).setView(latlng, 15);
var zoomControl = new L.Control.Zoom();
map.addControl(zoomControl);
</script>
</body>
</html>

6
debug/include.js
View File

@ -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++) {

BIN
dist/images/zoom-in.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 963 B

BIN
dist/images/zoom-out.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 959 B

67
dist/leaflet.css vendored
View File

@ -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;

8
dist/leaflet.js vendored
View File

@ -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<c;b++){var d=a[b].src;if((d=d&&d.match(/^(.*\/)leaflet-*\w*\.js.*$/))&&d[1])return d[1]}return"../dist/"}(),noConflict:function(){L=this._originalL;return this},_originalL:L};L.Util={extend:function(a){for(var b=Array.prototype.slice.call(arguments,1),c=0,d=b.length,e;c<d;c++)for(var f in e=b[c]||{},e)e.hasOwnProperty(f)&&(a[f]=e[f]);return a},bind:function(a,b){return function(){return a.apply(b,arguments)}},stamp:function(){var a=0;return function(b){b._leaflet_id=b._leaflet_id||++a;return b._leaflet_id}}(),limitExecByInterval:function(a,b,c){function d(){e=!1;f&&(g.callee.apply(c,g),f=!1)}var e,f,g;return function(){g=arguments;e?f=!0:(e=!0,setTimeout(d,b),a.apply(c,
var L={VERSION:"0.1a4",ROOT_URL:function(){for(var a=document.getElementsByTagName("script"),b=0,c=a.length;b<c;b++){var d=a[b].src;if((d=d&&d.match(/^(.*\/)leaflet-*\w*\.js.*$/))&&d[1])return d[1]}return"../../dist/"}(),noConflict:function(){L=this._originalL;return this},_originalL:L};L.Util={extend:function(a){for(var b=Array.prototype.slice.call(arguments,1),c=0,d=b.length,e;c<d;c++)for(var f in e=b[c]||{},e)e.hasOwnProperty(f)&&(a[f]=e[f]);return a},bind:function(a,b){return function(){return a.apply(b,arguments)}},stamp:function(){var a=0;return function(b){b._leaflet_id=b._leaflet_id||++a;return b._leaflet_id}}(),limitExecByInterval:function(a,b,c){function d(){e=!1;f&&(g.callee.apply(c,g),f=!1)}var e,f,g;return function(){g=arguments;e?f=!0:(e=!0,setTimeout(d,b),a.apply(c,
g))}},deferExecByInterval:function(a,b,c){function d(){f=!1;a.apply(c,e)}var e,f;return function(){e=arguments;f||(f=!0,setTimeout(d,b))}},falseFn:function(){return!1},formatNum:function(a,b){var c=Math.pow(10,b||5);return Math.round(a*c)/c},setOptions:function(a,b){a.options=L.Util.extend({},a.options,b)}};L.Class=function(){};
L.Class.extend=function(a){var b=function(){!L.Class._prototyping&&this.initialize&&this.initialize.apply(this,arguments)};L.Class._prototyping=!0;var c=new this;L.Class._prototyping=!1;c.constructor=b;b.prototype=c;c.superclass=this.prototype;a.statics&&(L.Util.extend(b,a.statics),delete a.statics);a.includes&&(L.Util.extend.apply(null,[c].concat(a.includes)),delete a.includes);if(a.options&&c.options)a.options=L.Util.extend({},c.options,a.options);L.Util.extend(c,a);b.extend=arguments.callee;b.include=
function(a){L.Util.extend(this.prototype,a)};for(var d in this)this.hasOwnProperty(d)&&d!="prototype"&&(b[d]=this[d]);return b};L.Mixin={};
@ -65,7 +65,8 @@ this._zooming){this._zooming=!1;var b=this._map.getZoom();a=Math.log(this._scale
this),50);L.DomEvent.preventDefault(a)},_performZoom:function(){var a=Math.round(this._delta);this._delta=0;if(a){var b=this._getCenterForScrollWheelZoom(this._lastMousePos,a);a=this._map.getZoom()+a;this._map._limitZoom(a)!=this._map._zoom&&this._map.setView(b,a)}},_getCenterForScrollWheelZoom:function(a,b){var c=this._map.getPixelBounds().getCenter(),d=this._map.getSize().divideBy(2);d=a.subtract(d).multiplyBy(1-Math.pow(2,-b));return this._map.unproject(c.add(d))}});L.Handler.DoubleClickZoom=L.Handler.extend({enable:function(){if(!this._enabled)this._map.on("dblclick",this._onDoubleClick,this._map),this._enabled=!0},disable:function(){if(this._enabled)this._map.off("dblclick",this._onDoubleClick,this._map),this._enabled=!1},_onDoubleClick:function(a){this.setView(a.position,this._zoom+1)}});L.Handler.ShiftDragZoom=L.Handler.extend({initialize:function(a){this._map=a;this._container=a._container;this._pane=a._panes.overlayPane},enable:function(){if(!this._enabled)L.DomEvent.addListener(this._container,"mousedown",this._onMouseDown,this),this._enabled=!0},disable:function(){if(this._enabled)L.DomEvent.removeListener(this._container,"mousedown",this._onMouseDown),this._enabled=!1},_onMouseDown:function(a){if(!a.shiftKey||a.which!=1&&a.button!=1)return!1;L.DomUtil.disableTextSelection();
this._startLayerPoint=this._map.mouseEventToLayerPoint(a);this._box=L.DomUtil.create("div","leaflet-zoom-box",this._pane);L.DomUtil.setPosition(this._box,this._startLayerPoint);this._container.style.cursor="crosshair";L.DomEvent.addListener(document,"mousemove",this._onMouseMove,this);L.DomEvent.addListener(document,"mouseup",this._onMouseUp,this);L.DomEvent.preventDefault(a)},_onMouseMove:function(a){var b=this._map.mouseEventToLayerPoint(a);a=b.x-this._startLayerPoint.x;var c=b.y-this._startLayerPoint.y;
b=new L.Point(Math.min(b.x,this._startLayerPoint.x),Math.min(b.y,this._startLayerPoint.y));L.DomUtil.setPosition(this._box,b);this._box.style.width=Math.abs(a)-4+"px";this._box.style.height=Math.abs(c)-4+"px"},_onMouseUp:function(a){this._pane.removeChild(this._box);this._container.style.cursor="";L.DomUtil.enableTextSelection();L.DomEvent.removeListener(document,"mousemove",this._onMouseMove);L.DomEvent.removeListener(document,"mouseup",this._onMouseUp);a=this._map.mouseEventToLayerPoint(a);this._map.fitBounds(new L.LatLngBounds(this._map.layerPointToLatLng(this._startLayerPoint),
this._map.layerPointToLatLng(a)))}});L.Map=L.Class.extend({includes:L.Mixin.Events,options:{projection:L.Projection.Mercator,transformation:new L.Transformation(0.5/Math.PI,0.5,-0.5/Math.PI,0.5),scaling:function(a){return 256*(1<<a)},center:null,zoom:null,layers:[],dragging:!0,touchZoom:L.Browser.mobileWebkit,scrollWheelZoom:!L.Browser.mobileWebkit,doubleClickZoom:!0,shiftDragZoom:!0,trackResize:!0,closePopupOnClick:!0},initialize:function(a,b){L.Util.setOptions(this,b);this._container=L.DomUtil.get(a);this._initLayout();L.DomEvent&&
this._map.layerPointToLatLng(a)))}});L.Control={};L.Control.Position={TOP_LEFT:"topLeft",TOP_RIGHT:"topRight",BOTTOM_LEFT:"bottomLeft",BOTTOM_RIGHT:"bottomRight"};L.Control.Zoom=L.Class.extend({onAdd:function(a){this._map=a;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 a=
L.Control.Position;return L.Browser.mobileWebkit?a.BOTTOM_LEFT:a.TOP_LEFT},_createButton:function(a,b,c,d){var e=document.createElement("a");e.href="#";e.title=a;e.className=b;L.DomEvent.disableClickPropagation(e);L.DomEvent.addListener(e,"click",L.DomEvent.preventDefault);L.DomEvent.addListener(e,"click",c,d);return e}});L.Map=L.Class.extend({includes:L.Mixin.Events,options:{projection:L.Projection.Mercator,transformation:new L.Transformation(0.5/Math.PI,0.5,-0.5/Math.PI,0.5),scaling:function(a){return 256*(1<<a)},center:null,zoom:null,layers:[],dragging:!0,touchZoom:L.Browser.mobileWebkit,scrollWheelZoom:!L.Browser.mobileWebkit,doubleClickZoom:!0,shiftDragZoom:!0,trackResize:!0,closePopupOnClick:!0},initialize:function(a,b){L.Util.setOptions(this,b);this._container=L.DomUtil.get(a);this._initLayout();L.DomEvent&&
(this._initEvents(),L.Handler&&this._initInteraction());var c=this.options.center,d=this.options.zoom;c!==null&&d!==null&&this.setView(c,d,!0);c=this.options.layers;c=c instanceof Array?c:[c];this._initLayers(c)},setView:function(a,b){this._resetView(a,this._limitZoom(b));return this},setZoom:function(a){return this.setView(this.getCenter(),a)},zoomIn:function(){return this.setZoom(this._zoom+1)},zoomOut:function(){return this.setZoom(this._zoom-1)},fitBounds:function(a){var b=this.getBoundsZoom(a);
return this.setView(a.getCenter(),b)},fitWorld:function(){var a=new L.LatLng(-60,-170),b=new L.LatLng(85,179);return this.fitBounds(new L.LatLngBounds(a,b))},panTo:function(a){return this.setView(a,this._zoom)},panBy:function(a){this.fire("movestart");this._rawPanBy(a);this.fire("move");this.fire("moveend");return this},addLayer:function(a){var b=L.Util.stamp(a);if(!this._layers[b]){this._layers[b]=a;if(a.options&&!isNaN(a.options.maxZoom))this._layersMaxZoom=Math.max(this._layersMaxZoom||0,a.options.maxZoom);
if(a.options&&!isNaN(a.options.minZoom))this._layersMinZoom=Math.min(this._layersMinZoom||Infinity,a.options.minZoom);b=function(){a.onAdd(this);this.fire("layeradd",{layer:a})};if(this._loaded)b.call(this);else this.on("load",b,this)}return this},removeLayer:function(a){var b=L.Util.stamp(a);this._layers[b]&&(a.onRemove(this),delete this._layers[b],this.fire("layerremove",{layer:a}));return this},invalidateSize:function(){this._sizeChanged=!0;this.fire("move");clearTimeout(this._sizeTimer);this._sizeTimer=
@ -84,4 +85,5 @@ this),this._panTransition.on("end",this._onPanTransitionEnd,this);this.fire(this
a;this._animateToZoom=b;a=L.DomUtil.TRANSFORM_PROPERTY;this._tileBg.style[a]+=" translate(0,0)";L.Util.falseFn(this._tileBg.offsetWidth);b={};b[a]=this._tileBg.style[a]+" "+L.DomUtil.getScaleString(c,d);this._tileBg.transition.run(b)},_prepareTileBg:function(){if(!this._tileBg)this._tileBg=this._createPane("leaflet-tile-pane",this._mapPane),this._tileBg.style.zIndex=1;var a=this._tilePane;this._tilePane=this._panes.tilePane=this._tileBg;this._tileBg=a;this._tilePane.innerHTML="";this._tilePane.style[L.DomUtil.TRANSFORM_PROPERTY]=
"";this._tilePane.style.visibility="hidden";this._tilePane.empty=!0;this._tileBg.empty=!1;if(!this._tileBg.transition)this._tileBg.transition=new L.Transition(this._tileBg,{duration:0.3,easing:"cubic-bezier(0.25,0.1,0.25,0.75)"}),this._tileBg.transition.on("end",this._onZoomTransitionEnd,this);this._removeExcessiveBgTiles()},_removeExcessiveBgTiles:function(){for(var a=[].slice.call(this._tileBg.getElementsByTagName("img")),b=this._container.getBoundingClientRect(),c=0,d=a.length;c<d;c++){var e=a[c].getBoundingClientRect();
if(!a[c].complete||e.right<=b.left||e.left>=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)}});

37
src/control/Control.Zoom.js Normal file
View File

@ -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;
}
});

9
src/control/Control.js Normal file
View File

@ -0,0 +1,9 @@
L.Control = {};
L.Control.Position = {
TOP_LEFT: 'topLeft',
TOP_RIGHT: 'topRight',
BOTTOM_LEFT: 'bottomLeft',
BOTTOM_RIGHT: 'bottomRight'
};

44
src/map/ext/Map.Control.js Normal file
View File

@ -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);
}
}
});