]> git.openstreetmap.org Git - rails.git/blob - public/export/embed.html
Use the HTML5 doctype and specify the character set explicitly
[rails.git] / 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               maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
36                                                20037508.34,20037508.34),
37               numZoomLevels: 20,
38               maxResolution: 156543.0339,
39               displayProjection: new OpenLayers.Projection("EPSG:4326"),
40               units: 'm',
41               projection: new OpenLayers.Projection("EPSG:900913")
42             });
43
44             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>';
45             var args = OpenLayers.Util.getParameters();
46             if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
47                 var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
48                    displayOutsideMaxExtent: true,
49                    wrapDateLine: true,
50                    attribution: attribution
51                 });
52                 map.addLayer(mapnik);
53             } else if (args.layer == "cyclemap" || args.layer == "cycle map") {
54                 var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
55                    displayOutsideMaxExtent: true,
56                    wrapDateLine: true,
57                    attribution: attribution
58                 });
59                 map.addLayer(cyclemap);
60             } else if (args.layer == "transportmap") {
61                 var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
62                    displayOutsideMaxExtent: true,
63                    wrapDateLine: true,
64                    attribution: attribution
65                 });
66                 map.addLayer(transportmap);
67             } else if (args.layer == "mapquest") {
68                 var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
69                     "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
70                     "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
71                     "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
72                     "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
73                    displayOutsideMaxExtent: true,
74                    wrapDateLine: true,
75                    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'>"
76                 });
77                 map.addLayer(mapquestmap);
78             }
79
80             if (args.marker) {
81                 var markers = new OpenLayers.Layer.Markers();
82                 map.addLayer(markers);
83                 markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
84                 map.marker = true;
85             }
86
87             if (args.bbox) {
88                 var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
89                 map.zoomToExtent(bounds)
90             } else {
91                 map.zoomToMaxExtent();
92             }
93
94             var size = map.getSize();
95             if (size.h > 320) {
96                 map.addControl(new OpenLayers.Control.PanZoomBar());
97             } else {
98                 map.addControl(new OpenLayers.Control.Zoom());
99             }
100         }
101     // -->
102     </script>
103   </head>
104
105   <body onload="init()">
106     <div id="map"></div>
107   </body>
108 </html>