Leaflet/debug/vector/rectangle.html
Thach Hoang 0d1eae32be Fix debug examples after rollup (#5417)
Fix #5373.

- Remove references to removed file "../../build/deps.js"
- Update leaflet-include.js to point to "../dist/leaflet-src.js"
- Update watch to use the same destination file as rollup (dist/leaflet-src.js)
- Define getRandomLatLng where used
2017-03-28 08:40:48 +02:00

55 lines
1.4 KiB
HTML

<!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" />
<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>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
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.")
});
rectangle.bindPopup('I\'m a rectangle!');
var map = new L.Map('map', {
center: bounds.getCenter(),
zoom: 7,
layers: [osm]
});
map.addLayer(rectangle).addLayer(styledRectangle);
function resetBounds() {
rectangle.setBounds(map.getBounds());
}
</script>
</body>
</html>