Merge branch 'master' of github.com:CloudMade/Leaflet
This commit is contained in:
commit
fd90a94f31
@ -7,16 +7,18 @@ Leaflet Changelog
|
||||
|
||||
An in-progress version being developed on the master branch.
|
||||
|
||||
### Major features
|
||||
### Notable new features
|
||||
|
||||
* Added **polyline and polygon editing**. [#174](https://github.com/CloudMade/Leaflet/issues/174)
|
||||
* Added `DivIcon` class that easily allows you to create lightweight div-based markers.
|
||||
* Added `Rectangle` vector layer (by [@JasonSanford](https://github.com/JasonSanford)). [#504](https://github.com/CloudMade/Leaflet/pull/504)
|
||||
|
||||
### Improvements
|
||||
|
||||
#### Usabiliy improvements
|
||||
|
||||
* Drag-panning now works even when there are markers in the starting point (helps on maps with lots of markers). [#506](https://github.com/CloudMade/Leaflet/issues/506)
|
||||
* Improved panning performance even more (there are no wasted frames now).
|
||||
* Slightly improved default popup styling.
|
||||
|
||||
#### Breaking API changes
|
||||
@ -33,6 +35,7 @@ An in-progress version being developed on the master branch.
|
||||
* Added `Icon` `className` option to assign a custom class to an icon.
|
||||
* Added `Icon` `shadowOffset` option to set the position of shadow relative to the icon.
|
||||
* Made all `Icon` options except `iconUrl` optional (if not specified, they'll be chosen automatically or implemented using CSS). Anchor is centered by default (if size is specified), and otherwise can be set through CSS using negative margins.
|
||||
* Added `originalEvent` property to `MouseEvent` (by [@k4](https://github.com/k4)). [#521](https://github.com/CloudMade/Leaflet/pull/521)
|
||||
* Added `Circle` `getBounds` method. [#440](https://github.com/CloudMade/Leaflet/issues/440)
|
||||
* Added `Marker` `opacity` option.
|
||||
* Added public `redraw` method to vector layers (useful if you manipulate their `LatLng` points directly).
|
||||
|
@ -76,6 +76,7 @@
|
||||
'layer/vector/Polyline.Edit.js',
|
||||
'layer/vector/canvas/Polyline.Canvas.js',
|
||||
'layer/vector/Polygon.js',
|
||||
'layer/vector/Rectangle.js',
|
||||
'layer/vector/canvas/Polygon.Canvas.js',
|
||||
'layer/vector/MultiPoly.js',
|
||||
'layer/vector/Circle.js',
|
||||
|
53
debug/vector/rectangle.html
Normal file
53
debug/vector/rectangle.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Leaflet debug page</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
|
||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||
|
||||
<script src="../leaflet-include.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="map" style="width: 500px; height: 500px;"></div>
|
||||
<input type="button" value="Set blue rectangle bounds as current map extent." onclick="resetBounds();" />
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});;
|
||||
|
||||
var bounds = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240));
|
||||
var bounds2 = new L.LatLngBounds(new L.LatLng(56.2124322195806, -3.427734375), new L.LatLng(56.307776937156945, -3.2560729980468746));
|
||||
|
||||
var rectangle = new L.Rectangle(bounds);
|
||||
var styledRectangle = new L.Rectangle(bounds2, {
|
||||
fillColor: "#ff7800",
|
||||
color: "#000000",
|
||||
opacity: 1,
|
||||
weight: 2
|
||||
});
|
||||
|
||||
rectangle.on("click", function () {
|
||||
alert("you clicked a rectangle.")
|
||||
});
|
||||
|
||||
var map = new L.Map('map', {
|
||||
center: bounds.getCenter(),
|
||||
zoom: 7,
|
||||
layers: [cloudmade]
|
||||
});
|
||||
|
||||
map.addLayer(rectangle).addLayer(styledRectangle);
|
||||
|
||||
function resetBounds() {
|
||||
rectangle.setBounds(map.getBounds());
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,4 +1,3 @@
|
||||
|
||||
L.Control.Zoom = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft'
|
||||
@ -6,25 +5,23 @@ L.Control.Zoom = L.Control.extend({
|
||||
|
||||
onAdd: function (map) {
|
||||
var className = 'leaflet-control-zoom',
|
||||
container = L.DomUtil.create('div', className),
|
||||
zoomInButton = this._createButton('Zoom in', className + '-in', map.zoomIn, map),
|
||||
zoomOutButton = this._createButton('Zoom out', className + '-out', map.zoomOut, map);
|
||||
container = L.DomUtil.create('div', className);
|
||||
|
||||
container.appendChild(zoomInButton);
|
||||
container.appendChild(zoomOutButton);
|
||||
this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
|
||||
this._createButton('Zoom out', className + '-out', container, map.zoomOut, map);
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
_createButton: function (title, className, fn, context) {
|
||||
var link = document.createElement('a');
|
||||
_createButton: function (title, className, container, fn, context) {
|
||||
var link = L.DomUtil.create('a', className, container);
|
||||
link.href = '#';
|
||||
link.title = title;
|
||||
link.className = className;
|
||||
|
||||
L.DomEvent.addListener(link, 'click', L.DomEvent.stopPropagation);
|
||||
L.DomEvent.addListener(link, 'click', L.DomEvent.preventDefault);
|
||||
L.DomEvent.addListener(link, 'click', fn, context);
|
||||
L.DomEvent
|
||||
.addListener(link, 'click', L.DomEvent.stopPropagation)
|
||||
.addListener(link, 'click', L.DomEvent.preventDefault)
|
||||
.addListener(link, 'click', fn, context);
|
||||
|
||||
return link;
|
||||
}
|
||||
|
@ -30,6 +30,9 @@ L.Util = {
|
||||
};
|
||||
}()),
|
||||
|
||||
|
||||
// TODO refactor: remove repetition
|
||||
|
||||
requestAnimFrame: (function () {
|
||||
function timeoutDefer(callback) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
@ -47,11 +50,24 @@ L.Util = {
|
||||
if (immediate && requestFn === timeoutDefer) {
|
||||
callback();
|
||||
} else {
|
||||
requestFn(callback, contextEl);
|
||||
return requestFn.call(window, callback, contextEl);
|
||||
}
|
||||
};
|
||||
}()),
|
||||
|
||||
cancelAnimFrame: (function () {
|
||||
var requestFn = window.cancelAnimationFrame ||
|
||||
window.webkitCancelRequestAnimationFrame ||
|
||||
window.mozCancelRequestAnimationFrame ||
|
||||
window.oCancelRequestAnimationFrame ||
|
||||
window.msCancelRequestAnimationFrame ||
|
||||
clearTimeout;
|
||||
|
||||
return function (handle) {
|
||||
return requestFn.call(window, handle);
|
||||
}
|
||||
}()),
|
||||
|
||||
limitExecByInterval: function (fn, time, context) {
|
||||
var lock, execOnUnlock, args;
|
||||
function exec() {
|
||||
|
@ -9,7 +9,7 @@ L.DomEvent = {
|
||||
key = '_leaflet_' + type + id;
|
||||
|
||||
if (obj[key]) {
|
||||
return;
|
||||
return this;
|
||||
}
|
||||
|
||||
var handler = function (e) {
|
||||
|
@ -90,7 +90,8 @@ L.Draggable = L.Class.extend({
|
||||
var newPoint = new L.Point(first.clientX, first.clientY);
|
||||
this._newPos = this._startPos.add(newPoint).subtract(this._startPoint);
|
||||
|
||||
L.Util.requestAnimFrame(this._updatePosition, this, true, this._dragStartTarget);
|
||||
L.Util.cancelAnimFrame(this._animRequest);
|
||||
this._animRequest = L.Util.requestAnimFrame(this._updatePosition, this, true, this._dragStartTarget);
|
||||
},
|
||||
|
||||
_updatePosition: function () {
|
||||
|
@ -106,7 +106,8 @@ L.Path = L.Path.extend({
|
||||
this.fire(e.type, {
|
||||
latlng: latlng,
|
||||
layerPoint: layerPoint,
|
||||
containerPoint: containerPoint
|
||||
containerPoint: containerPoint,
|
||||
originalEvent: e
|
||||
});
|
||||
|
||||
L.DomEvent.stopPropagation(e);
|
||||
|
23
src/layer/vector/Rectangle.js
Normal file
23
src/layer/vector/Rectangle.js
Normal file
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* L.Rectangle extends Polygon and creates a rectangle when passed at LatLngBounds
|
||||
*/
|
||||
|
||||
L.Rectangle = L.Polygon.extend({
|
||||
initialize: function (latLngBounds, options) {
|
||||
L.Polygon.prototype.initialize.call(this, this._boundsToLatLngs(latLngBounds), options);
|
||||
},
|
||||
|
||||
setBounds: function (latLngBounds) {
|
||||
this.setLatLngs(this._boundsToLatLngs(latLngBounds));
|
||||
},
|
||||
|
||||
_boundsToLatLngs: function (latLngBounds) {
|
||||
return [
|
||||
latLngBounds.getSouthWest(),
|
||||
latLngBounds.getNorthWest(),
|
||||
latLngBounds.getNorthEast(),
|
||||
latLngBounds.getSouthEast(),
|
||||
latLngBounds.getSouthWest()
|
||||
];
|
||||
}
|
||||
});
|
@ -597,7 +597,8 @@ L.Map = L.Class.extend({
|
||||
this.fire(type, {
|
||||
latlng: latlng,
|
||||
layerPoint: layerPoint,
|
||||
containerPoint: containerPoint
|
||||
containerPoint: containerPoint,
|
||||
originalEvent: e
|
||||
});
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user