]> git.openstreetmap.org Git - rails.git/blob - public/export/embed.html
Replace PanZoom control with Zoom control for small maps
[rails.git] / 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" || args.layer == "osmarender") {
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 == "cyclemap" || args.layer == "cycle map") {
53                 var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
54                    displayOutsideMaxExtent: true,
55                    wrapDateLine: true,
56                    attribution: attribution
57                 });
58                 map.addLayer(cyclemap);
59             } else if (args.layer == "transportmap") {
60                 var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
61                    displayOutsideMaxExtent: true,
62                    wrapDateLine: true,
63                    attribution: attribution
64                 });
65                 map.addLayer(transportmap);
66             } else if (args.layer == "mapquest") {
67                 var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
68                     "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
69                     "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
70                     "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
71                     "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
72                    displayOutsideMaxExtent: true,
73                    wrapDateLine: true,
74                    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'>"
75                 });
76                 map.addLayer(mapquestmap);
77             }
78
79             if (args.marker) {
80                 var markers = new OpenLayers.Layer.Markers();
81                 map.addLayer(markers);
82                 markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
83                 map.marker = true;
84             }
85
86             if (args.bbox) {
87                 var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
88                 map.zoomToExtent(bounds)
89             } else {
90                 map.zoomToMaxExtent();
91             }
92
93             var size = map.getSize();
94             if (size.h > 320) {
95                 map.addControl(new OpenLayers.Control.PanZoomBar());
96             } else {
97                 map.addControl(new OpenLayers.Control.Zoom());
98             }
99         }
100     // -->
101     </script>
102   </head>
103
104   <body onload="init()">
105     <div id="map"></div>
106   </body>
107 </html>