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">
4 <title>OpenStreetMap Embedded</title>
5 <style type="text/css">
19 .olControlAttribution {
20 bottom: 3px!important;
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">
29 map = new OpenLayers.Map ("map", {
31 new OpenLayers.Control.Attribution(),
32 new OpenLayers.Control.Navigation()
34 maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
35 20037508.34,20037508.34),
37 maxResolution: 156543.0339,
38 displayProjection: new OpenLayers.Projection("EPSG:4326"),
40 projection: new OpenLayers.Projection("EPSG:900913")
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,
49 attribution: attribution
52 } else if (args.layer == "cyclemap" || args.layer == "cycle map") {
53 var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
54 displayOutsideMaxExtent: true,
56 attribution: attribution
58 map.addLayer(cyclemap);
59 } else if (args.layer == "transportmap") {
60 var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
61 displayOutsideMaxExtent: true,
63 attribution: attribution
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,
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'>",
76 map.addLayer(mapquestmap);
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())));
87 var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
88 map.zoomToExtent(bounds)
90 map.zoomToMaxExtent();
93 var size = map.getSize();
95 map.addControl(new OpenLayers.Control.PanZoomBar());
97 map.addControl(new OpenLayers.Control.PanZoom());
104 <body onload="init()">