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

Merge pull request #504 from JasonSanford/master

Browse Source 
Rectangle Layer
This commit is contained in:
Vladimir Agafonkin 2012-02-21 22:58:16 -08:00
commit 4261eb3d40
3 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
debug/leaflet-include.js
View File

@ -76,6 +76,7 @@
'layer/vector/Polyline.Edit.js', 'layer/vector/Polyline.Edit.js',
'layer/vector/canvas/Polyline.Canvas.js', 'layer/vector/canvas/Polyline.Canvas.js',
'layer/vector/Polygon.js', 'layer/vector/Polygon.js',
'layer/vector/Rectangle.js',
'layer/vector/canvas/Polygon.Canvas.js', 'layer/vector/canvas/Polygon.Canvas.js',
'layer/vector/MultiPoly.js', 'layer/vector/MultiPoly.js',
'layer/vector/Circle.js', 'layer/vector/Circle.js',

53
debug/vector/rectangle.html Normal file
View 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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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>

23
src/layer/vector/Rectangle.js Normal file
View 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()
];
}
});