extlib/leaflet/debug/vector/vector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Leaflet debug page</title>
   5
   6         <link rel="stylesheet" href="../../dist/leaflet.css" />
   7         <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
   8
   9         <link rel="stylesheet" href="../css/screen.css" />
  10
  11         <script src="../leaflet-include.js"></script>
  12 </head>
  13 <body>
  14         <div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
  15
  16         <script src="route.js"></script>
  17         <script>
  18                 var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
  19                         cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
  20
  21                 for (var i = 0, latlngs = [], len = route.length; i < len; i++) {
  22                         latlngs.push(new L.LatLng(route[i][0], route[i][1]));
  23                 }
  24                 var path = new L.Polyline(latlngs);
  25
  26                 var map = new L.Map('map', {layers: [cloudmade]});
  27
  28                 map.fitBounds(new L.LatLngBounds(latlngs));
  29
  30                 map.addLayer(new L.Marker(latlngs[0]));
  31                 map.addLayer(new L.Marker(latlngs[len - 1]));
  32
  33                 map.addLayer(path);
  34
  35                 path.bindPopup("Hello world");
  36         </script>
  37 </body>
  38 </html>