]> git.openstreetmap.org Git - rails.git/blobdiff - public/export/embed.html
projects / rails.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Port embed.html to leaflet
[rails.git] / public / export / embed.html
diff --git a/public/export/embed.html b/public/export/embed.html
index 58bfdec21487a4b9b6f7005f8d09cf1ff3b0965a..3559f8f35b23336c8191b8c6b77d5795445bc57e 100644 (file)
--- a/public/export/embed.html
+++ b/public/export/embed.html
@@ -1,111 +1,67 @@
+<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
+    <meta charset="utf-8">
+    <title>OpenStreetMap Embedded</title>
     <style type="text/css">
     <style type="text/css">
-        #map {
+        html {
+            width: 100%;
+            height: 100%;
+        }
+        body {
             width: 100%;
             height: 100%;
             width: 100%;
             height: 100%;
+            margin: 0px;
         }
         }
-        .olControlAttribution {
-            bottom: 3px!important;
+        #map {
+            width: 100%;
+            height: 100%;
         }
     </style>
         }
     </style>
-    <script src="http://openstreetmap.org/openlayers/OpenLayers.js"></script>
-    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
-    <script type="text/javascript">
-        var map, layer;
-        function localUpdateLink() {
-            var center = this.map.getCenter();
-
-            // Map not initialized yet. Break out of this function.
-            if (!center) {
-                return;
-            }
-
-            var params = OpenLayers.Util.getParameters(this.base);
-
-            params.zoom = this.map.getZoom();
-            var lat = center.lat;
-            var lon = center.lon;
+    <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>
 
 
-            if (this.displayProjection) {
-                var mapPosition = OpenLayers.Projection.transform(
-                  { x: lon, y: lat },
-                  this.map.getProjectionObject(),
-                  this.displayProjection );
-                lon = mapPosition.x;
-                lat = mapPosition.y;
-            }
+  <body>
+    <div id="map"></div>
+    <script>
+      var query = (window.location.search || '?').substr(1),
+          args  = {};
 
 
-            params.lat = Math.round(lat*100000)/100000;
-            params.lon = Math.round(lon*100000)/100000;
+      query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
+        value = value.split(",");
+        if (value.length == 1)
+          value = value[0];
+        args[key] = value;
+      });
 
 
-            var href = this.base;
-            if(href.indexOf('?') != -1) {
-                href = href.substring( 0, href.indexOf('?') );
-            }
+      var map = L.map("map");
+      map.attributionControl.setPrefix('');
 
 
-            href += '?' + OpenLayers.Util.getParameterString(params);
-            this.element.href = href;
-        }
+      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);
+      }
 
 
-        function init(){
-            OpenLayers.Lang.en.permalink = "Larger Map";
-            map = new OpenLayers.Map ("map", {
-              controls: [
-                  new OpenLayers.Control.Attribution(),
-                  new OpenLayers.Control.Navigation(),
-                  new OpenLayers.Control.Permalink(null, "http://openstreetmap.org/", { updateLink: localUpdateLink })
-              ],
-              maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
-                                               20037508.34,20037508.34),
-              numZoomLevels: 20,
-              maxResolution: 156543.0339,
-              displayProjection: new OpenLayers.Projection("EPSG:4326"),
-              units: 'm',
-              projection: new OpenLayers.Projection("EPSG:900913")
-            });
+      if (args.marker) {
+        L.marker(args.marker).addTo(map);
+      }
 
 
-            var attribution = 'Data by <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>';
-            var args = OpenLayers.Util.getParameters();
-            if (!args.layer || args.layer == "mapnik") {
-                var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
-                   displayOutsideMaxExtent: true,
-                   wrapDateLine: true,
-                   attribution: attribution 
-                });
-                map.addLayer(mapnik);
-            } else {        
-                var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
-                   displayOutsideMaxExtent: true,
-                   wrapDateLine: true,
-                   attribution: attribution 
-                });
-                map.addLayer(osmarender); 
-            } 
-            if (args.marker) {
-                var markers = new OpenLayers.Layer.Markers();
-                map.addLayer(markers);
-                var center = args.marker.split(","); 
-                markers.addMarker( new OpenLayers.Marker(new OpenLayers.LonLat(center[1], center[0]).transform(map.displayProjection, map.getProjectionObject())));
-                map.marker = true;
-            }    
-            if (args.bbox) {  
-                var bounds = OpenLayers.Bounds.fromString(args.bbox).transform(map.displayProjection, map.getProjectionObject());
-                var center = bounds.getCenterLonLat();
-                map.setCenter(center, map.getZoomForExtent(bounds, true);
-            } else {
-                map.zoomToMaxExtent(); 
-            }
-            var size = map.getSize();
-            if (size.h > 320) {
-                map.addControl(new OpenLayers.Control.PanZoomBar());
-            } else {
-                map.addControl(new OpenLayers.Control.PanZoom());
-            }
-        }
+      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>
     </script>
-  </head>
-  <body onload="init()">
-    <div id="map"></div>
   </body>
 </html>
   </body>
 </html>
The OpenStreetMap web site