2011-07-13 01:19:29 +08:00
<!DOCTYPE html>
< html >
< head >
< title > Leaflet debug page< / title >
< link rel = "stylesheet" href = "../../dist/leaflet.css" / >
<!-- [if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif] -->
2012-02-15 16:54:17 +08:00
2011-07-13 01:19:29 +08:00
< link rel = "stylesheet" href = "../css/screen.css" / >
2012-02-15 16:54:17 +08:00
2013-01-31 18:29:39 +08:00
< script type = "text/javascript" src = "../../build/deps.js" > < / script >
2012-07-26 22:35:09 +08:00
< script src = "../leaflet-include.js" > < / script >
2011-07-13 01:19:29 +08:00
< / head >
< body >
< div id = "map" > < / div >
< script type = "text/javascript" >
2012-02-15 16:54:17 +08:00
2011-07-13 01:19:29 +08:00
function getCloudMadeUrl(styleId) {
2013-03-22 22:27:07 +08:00
return 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/' + styleId + '/256/{z}/{x}/{y}.png';
2011-07-13 01:19:29 +08:00
}
2011-07-13 19:38:46 +08:00
var cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution}),
2012-02-15 16:54:17 +08:00
cloudmade2 = new L.TileLayer(getCloudMadeUrl(998), {attribution: 'Hello world'});
2013-06-11 20:44:21 +08:00
var map = new L.Map('map').addLayer(cloudmade).setView(new L.LatLng(50.5, 30.512), 15);
2012-02-15 16:54:17 +08:00
2013-06-11 20:44:21 +08:00
var marker = new L.Marker(new L.LatLng(50.5, 30.505), {color: 'red'});
2011-07-13 01:19:29 +08:00
map.addLayer(marker);
2013-06-11 20:44:21 +08:00
marker.bindPopup("Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.").openPopup();
2012-02-15 16:54:17 +08:00
2011-07-13 19:49:36 +08:00
var marker2 = new L.Marker(new L.LatLng(50.502, 30.515));
map.addLayer(marker2);
2012-02-15 16:54:17 +08:00
2011-07-13 19:49:36 +08:00
var layersControl = new L.Control.Layers({
'CloudMade Fresh': cloudmade,
2011-09-23 22:05:21 +08:00
'CloudMade Pale Dawn': cloudmade2
2011-07-13 19:49:36 +08:00
}, {
'Some marker': marker,
'Another marker': marker2
});
2012-02-15 16:54:17 +08:00
2011-07-13 19:49:36 +08:00
map.addControl(layersControl);
2012-02-25 23:04:27 +08:00
map.addControl(new L.Control.Scale());
2011-07-13 01:19:29 +08:00
< / script >
< / body >
2012-02-15 16:54:17 +08:00
< / html >
