]> git.openstreetmap.org Git - rails.git/commitdiff
Port embed.html to leaflet
authorJohn Firebaugh <john.firebaugh@gmail.com>
Tue, 16 Oct 2012 00:17:11 +0000 (17:17 -0700)
committerJohn Firebaugh <john.firebaugh@gmail.com>
Fri, 9 Nov 2012 20:59:28 +0000 (12:59 -0800)
public/export/embed.html

index c0036b632ed96c5ed26ce8eef128a818bdd4a5bf..3559f8f35b23336c8191b8c6b77d5795445bc57e 100644 (file)
@@ -7,7 +7,7 @@
         html {
             width: 100%;
             height: 100%;
-       }
+        }
         body {
             width: 100%;
             height: 100%;
             width: 100%;
             height: 100%;
         }
-        .olControlAttribution {
-            bottom: 3px!important;
-        }
     </style>
-    <script src="/openlayers/OpenLayers.js" type="text/javascript"></script>
-    <script src="/openlayers/OpenStreetMap.js" type="text/javascript"></script>
-    <script type="text/javascript">
-    <!--
-        var map, layer;
-        function init(){
-            map = new OpenLayers.Map ("map", {
-              controls: [
-                  new OpenLayers.Control.Attribution(),
-                  new OpenLayers.Control.Navigation()
-              ],
-              numZoomLevels: 20,
-              displayProjection: new OpenLayers.Projection("EPSG:4326")
-            });
+    <link href="/assets/leaflet.css" media="screen" rel="stylesheet" type="text/css">
+    <!--[if IE]>
+    <link href="/assets/leaflet.ie.css" media="screen" rel="stylesheet" type="text/css" />
+     <![endif]-->
+    <script src="/assets/leaflet.js"></script>
+    <script src="/assets/leaflet.osm.js"></script>
+  </head>
 
-            var attribution = '© <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, under an <a target="_parent" href="http://www.openstreetmap.org/copyright">open license</a>';
-            var args = OpenLayers.Util.getParameters();
-            if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
-                var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
-                   wrapDateLine: true,
-                   attribution: attribution
-                });
-                map.addLayer(mapnik);
-            } else if (args.layer == "cyclemap" || args.layer == "cycle map") {
-                var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
-                   wrapDateLine: true,
-                   attribution: attribution
-                });
-                map.addLayer(cyclemap);
-            } else if (args.layer == "transportmap") {
-                var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
-                   wrapDateLine: true,
-                   attribution: attribution
-                });
-                map.addLayer(transportmap);
-            } else if (args.layer == "mapquest") {
-                var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
-                    "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
-                    "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
-                    "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
-                    "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
-                   wrapDateLine: true,
-                   attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
-                });
-                map.addLayer(mapquestmap);
-            }
+  <body>
+    <div id="map"></div>
+    <script>
+      var query = (window.location.search || '?').substr(1),
+          args  = {};
 
-            if (args.marker) {
-                var markers = new OpenLayers.Layer.Markers();
-                map.addLayer(markers);
-                markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
-                map.marker = true;
-            }
+      query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
+        value = value.split(",");
+        if (value.length == 1)
+          value = value[0];
+        args[key] = value;
+      });
 
-            if (args.bbox) {
-                var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
-                map.zoomToExtent(bounds)
-            } else {
-                map.zoomToMaxExtent();
-            }
+      var map = L.map("map");
+      map.attributionControl.setPrefix('');
 
-            var size = map.getSize();
-            if (size.h > 320) {
-                map.addControl(new OpenLayers.Control.PanZoomBar());
-            } else {
-                map.addControl(new OpenLayers.Control.Zoom());
-            }
-        }
-    // -->
-    </script>
-  </head>
+      if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
+        new L.OSM.Mapnik().addTo(map);
+      } else if (args.layer == "cyclemap" || args.layer == "cycle map") {
+        new L.OSM.CycleMap().addTo(map);
+      } else if (args.layer == "transportmap") {
+        new L.OSM.TransportMap().addTo(map);
+      } else if (args.layer == "mapquest") {
+        new L.OSM.MapQuestOpen().addTo(map);
+      }
 
-  <body onload="init()">
-    <div id="map"></div>
+      if (args.marker) {
+        L.marker(args.marker).addTo(map);
+      }
+
+      if (args.bbox) {
+        map.fitBounds([L.latLng(args.bbox[1], args.bbox[0]),
+                       L.latLng(args.bbox[3], args.bbox[2])])
+      } else {
+        map.fitWorld();
+      }
+    </script>
   </body>
 </html>