Replace PanZoom control with Zoom control for small maps
[rails.git] / public / export / embed.html
index 11c0a02eebe2e55781bdf9c388a274b7731e2b04..a0398ab94bc56db9dda927ed286677ed3f386629 100644 (file)
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
+    <title>OpenStreetMap Embedded</title>
     <style type="text/css">
+        html {
+            width: 100%;
+            height: 100%;
+       }
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0px;
+        }
         #map {
             width: 100%;
             height: 100%;
         }
         .olControlAttribution {
-            bottom: 3px!important; 
-        }    
+            bottom: 3px!important;
+        }
     </style>
-    <script src="http://openstreetmap.org/openlayers/OpenLayers.js"></script>
-    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+    <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 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;
-            
-            if (this.displayProjection) {
-                var mapPosition = OpenLayers.Projection.transform(
-                  { x: lon, y: lat }, 
-                  this.map.getProjectionObject(), 
-                  this.displayProjection );
-                lon = mapPosition.x;  
-                lat = mapPosition.y;  
-            }
-            
-            if (this.map.marker) {
-                params.lat = Math.round(lat*100000)/100000;
-                params.lon = Math.round(lon*100000)/100000;
-            } else {
-                params.mlat = Math.round(lat*100000)/100000;
-                params.mlon = Math.round(lon*100000)/100000;
-            }
-
-            var href = this.base;
-            if( href.indexOf('?') != -1 ){
-                href = href.substring( 0, href.indexOf('?') );
-            }
-
-            href += '?' + OpenLayers.Util.getParameterString(params);
-            this.element.href = href;
-        }
-
         function init(){
-            OpenLayers.Lang.en.permalink = "Larger Map";
             map = new OpenLayers.Map ("map", {
-              controls:[
+              controls: [
                   new OpenLayers.Control.Attribution(),
-                  new OpenLayers.Control.ArgParser(),
-                  new OpenLayers.Control.Navigation(), 
-                  new OpenLayers.Control.Permalink(null, "http://openstreetmap.org/", {updateLink:localUpdateLink})],
+                  new OpenLayers.Control.Navigation()
+              ],
               maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                                20037508.34,20037508.34),
-              numZoomLevels:20, 
-              maxResolution:156543.0339,
+              numZoomLevels: 20,
+              maxResolution: 156543.0339,
               displayProjection: new OpenLayers.Projection("EPSG:4326"),
-              units:'m', 
+              units: 'm',
               projection: new OpenLayers.Projection("EPSG:900913")
-            } );          
-            var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
-               displayOutsideMaxExtent: true,
-               wrapDateLine: true,
-               attribution: '<a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>'
             });
-            map.addLayer(mapnik);
 
-            var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
-               displayOutsideMaxExtent: true,
-               wrapDateLine: true,
-               attribution: '<a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>'
-            });
-            map.addLayer(osmarender); 
+            var attribution = '(C) <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, <a target="_parent" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
             var args = OpenLayers.Util.getParameters();
-            if (args.marker && map.getCenter()) {
+            if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
+                var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
+                   displayOutsideMaxExtent: true,
+                   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", {
+                   displayOutsideMaxExtent: true,
+                   wrapDateLine: true,
+                   attribution: attribution
+                });
+                map.addLayer(cyclemap);
+            } else if (args.layer == "transportmap") {
+                var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
+                   displayOutsideMaxExtent: true,
+                   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"], {
+                   displayOutsideMaxExtent: true,
+                   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);
+            }
+
+            if (args.marker) {
                 var markers = new OpenLayers.Layer.Markers();
                 map.addLayer(markers);
-                markers.addMarker( new OpenLayers.Marker(map.getCenter()));
+                markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
                 map.marker = true;
-            }    
-            if (!map.getCenter()) { map.zoomToMaxExtent(); }
+            }
+
+            if (args.bbox) {
+                var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
+                map.zoomToExtent(bounds)
+            } else {
+                map.zoomToMaxExtent();
+            }
+
             var size = map.getSize();
-            if (size.h > 320) { 
+            if (size.h > 320) {
                 map.addControl(new OpenLayers.Control.PanZoomBar());
             } else {
-                map.addControl(new OpenLayers.Control.PanZoom());
-            }   
+                map.addControl(new OpenLayers.Control.Zoom());
+            }
         }
+    // -->
     </script>
   </head>
+
   <body onload="init()">
     <div id="map"></div>
   </body>