public/export/embed.html

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