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

handlers, move map dragging to MapDrag

Browse Source
This commit is contained in:
mourner 2010-09-16 18:33:33 +03:00
parent 8313ea5497
commit 63287f8a1a
5 changed files with 68 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
debug/map-mobile.html
View File

@ -28,6 +28,10 @@
<!-- /layer -->
<script type="text/javascript" src="../src/layer/TileLayer.js"></script>
<!-- /handlers -->
<script type="text/javascript" src="../src/handler/Handler.js"></script>
<script type="text/javascript" src="../src/handler/MapDrag.js"></script>
<!-- / -->
<script type="text/javascript" src="../src/Map.js"></script>

15
debug/map.html
View File

@ -26,22 +26,29 @@
<!-- /layer -->
<script type="text/javascript" src="../src/layer/TileLayer.js"></script>
<!-- /handlers -->
<script type="text/javascript" src="../src/handler/Handler.js"></script>
<script type="text/javascript" src="../src/handler/MapDrag.js"></script>
<!-- / -->
<script type="text/javascript" src="../src/Map.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/leaflet.css" />
</head>
<body style="padding: 10px">
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<div id="map" style="width: 500px; height: 500px; border: 1px solid #ccc"></div>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
var cloudmadeKey = 'BC9A493B41014CAABB98F0471D759707',
cloudmadeUrl = 'http://{s}.tile.cloudmade.com/' + cloudmadeKey + '/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 map = new L.Map('map')
.addLayer(cloudmade)
.setView(latlng, 15);
</script>
</body>
</html>

24
src/Map.js
View File

@ -17,7 +17,7 @@ L.Map = L.Class.extend({
layers: [],
//interaction
draggable: true,
dragging: true,
//misc
viewLoadOnDragEnd: false || L.Browser.mobileWebkit
@ -36,7 +36,7 @@ L.Map = L.Class.extend({
layers = (layers instanceof Array ? layers : [layers]);
this._initLayers(layers);
this._initInteraction();
if (L.Handler) { this._initInteraction(); }
this.setView(this.options.center, this.options.zoom, true);
},
@ -213,24 +213,8 @@ L.Map = L.Class.extend({
},
_initInteraction: function() {
if (this.options.draggable) {
this.dragging = new L.Draggable(this._mapPane, this._container);
var fireViewLoad = L.Util.limitExecByInterval(function() {
this.fire('viewload');
}, 200, this, true);
this.dragging.on('drag', function() {
this.fire('drag');
this.fire('move');
if (!this.options.viewLoadOnDragEnd) { fireViewLoad(); }
}, this);
this.dragging.on('dragend', function() {
this.fire('dragend');
this.fire('moveend');
if (this.options.viewLoadOnDragEnd) { fireViewLoad(); }
}, this);
if (L.Handler.MapDrag) {
this.dragging = new L.Handler.MapDrag(this, this.options.dragging);
}
},

6
src/handler/Handler.js Normal file
View File

@ -0,0 +1,6 @@
L.Handler = L.Class.extend({
initialize: function(map, enabled) {
this._map = map;
if (enabled) { this.enable(); }
}
});

43
src/handler/MapDrag.js Normal file
View File

@ -0,0 +1,43 @@
/*
* L.Handler.MapDrag makes the map draggable
*/
L.Handler.MapDrag = L.Handler.extend({
enable: function() {
if (!this._draggable) {
this._draggable = new L.Draggable(this._map._mapPane, this._map._container);
this._fireViewLoad = L.Util.limitExecByInterval(this._fireViewLoad, 200, this, true);
this._draggable.on('dragstart', this._onDragStart, this);
this._draggable.on('drag', this._onDrag, this);
this._draggable.on('dragend', this._onDragEnd, this);
}
this._draggable.enable();
},
disable: function() {
this._draggable.disable();
},
_fireViewLoad: function() {
this._map.fire('viewload');
},
_onDragStart: function() {
this._map.fire('movestart');
this._map.fire('dragstart');
if (this._map.options.viewLoadOnDragEnd) { this._fireViewLoad(); }
},
_onDrag: function() {
this._map.fire('move');
this._map.fire('drag');
if (!this._map.options.viewLoadOnDragEnd) { this._fireViewLoad(); }
},
_onDragEnd: function() {
this._map.fire('dragend');
this._map.fire('moveend');
}
});