public/export/embed.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>OpenStreetMap Embedded</title>
   6     <style type="text/css">
   7         html {
   8             width: 100%;
   9             height: 100%;
  10         }
  11         body {
  12             width: 100%;
  13             height: 100%;
  14             margin: 0px;
  15         }
  16         #map {
  17             width: 100%;
  18             height: 100%;
  19         }
  20         .olControlAttribution {
  21             bottom: 3px!important;
  22         }
  23     </style>
  24     <script src="/openlayers/OpenLayers.js" type="text/javascript"></script>
  25     <script src="/openlayers/OpenStreetMap.js" type="text/javascript"></script>
  26     <script type="text/javascript">
  27     <!--
  28         var map, layer;
  29         function init(){
  30             map = new OpenLayers.Map ("map", {
  31               controls: [
  32                   new OpenLayers.Control.Attribution(),
  33                   new OpenLayers.Control.Navigation()
  34               ],
  35               numZoomLevels: 20,
  36               displayProjection: new OpenLayers.Projection("EPSG:4326")
  37             });
  38
  39             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>';
  40             var args = OpenLayers.Util.getParameters();
  41             if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
  42                 var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
  43                    displayOutsideMaxExtent: true,
  44                    wrapDateLine: true,
  45                    attribution: attribution
  46                 });
  47                 map.addLayer(mapnik);
  48             } else if (args.layer == "cyclemap" || args.layer == "cycle map") {
  49                 var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
  50                    displayOutsideMaxExtent: true,
  51                    wrapDateLine: true,
  52                    attribution: attribution
  53                 });
  54                 map.addLayer(cyclemap);
  55             } else if (args.layer == "transportmap") {
  56                 var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
  57                    displayOutsideMaxExtent: true,
  58                    wrapDateLine: true,
  59                    attribution: attribution
  60                 });
  61                 map.addLayer(transportmap);
  62             } else if (args.layer == "mapquest") {
  63                 var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
  64                     "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  65                     "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  66                     "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  67                     "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
  68                    displayOutsideMaxExtent: true,
  69                    wrapDateLine: true,
  70                    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'>"
  71                 });
  72                 map.addLayer(mapquestmap);
  73             }
  74
  75             if (args.marker) {
  76                 var markers = new OpenLayers.Layer.Markers();
  77                 map.addLayer(markers);
  78                 markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
  79                 map.marker = true;
  80             }
  81
  82             if (args.bbox) {
  83                 var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
  84                 map.zoomToExtent(bounds)
  85             } else {
  86                 map.zoomToMaxExtent();
  87             }
  88
  89             var size = map.getSize();
  90             if (size.h > 320) {
  91                 map.addControl(new OpenLayers.Control.PanZoomBar());
  92             } else {
  93                 map.addControl(new OpenLayers.Control.Zoom());
  94             }
  95         }
  96     // -->
  97     </script>
  98   </head>
  99
 100   <body onload="init()">
 101     <div id="map"></div>
 102   </body>
 103 </html>