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

Adding L.Rectangle. Just ready to test in debug, still needs added to build scripts, documentation to be comlete. Addresses #494.

Browse Source
This commit is contained in:
Jason Sanford 2012-02-16 23:36:46 -07:00
parent d907c6df63
commit b18491c25d
3 changed files with 65 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/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',

48
debug/map/rectangle.html Normal file
View File

@ -0,0 +1,48 @@
<!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>
<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);
</script>
</body>
</html>

16
src/layer/vector/Rectangle.js Normal file
View File

@ -0,0 +1,16 @@
/*
* L.Rectangle extends Polygon and creates a rectangle when passed at LatLngBounds
*/
L.Rectangle = L.Polygon.extend({
initialize: function (latLngBounds, options) {
var latlngs = [
latLngBounds.getSouthWest(),
latLngBounds.getNorthWest(),
latLngBounds.getNorthEast(),
latLngBounds.getSouthEast(),
latLngBounds.getSouthWest()
];
L.Polygon.prototype.initialize.call(this, latlngs, options);
}
});