103 lines
4.1 KiB
HTML
103 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>OpenStreetMap Embedded</title>
|
|
<style type="text/css">
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.olControlAttribution {
|
|
bottom: 3px!important;
|
|
}
|
|
</style>
|
|
<script src="/openlayers/OpenLayers.js" type="text/javascript"></script>
|
|
<script src="/openlayers/OpenStreetMap.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
<!--
|
|
var map, layer;
|
|
function init(){
|
|
map = new OpenLayers.Map ("map", {
|
|
controls: [
|
|
new OpenLayers.Control.Attribution(),
|
|
new OpenLayers.Control.Navigation()
|
|
],
|
|
numZoomLevels: 20,
|
|
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
|
});
|
|
|
|
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>';
|
|
var args = OpenLayers.Util.getParameters();
|
|
if (!args.layer || args.layer == "mapnik" || args.layer == "osmarender") {
|
|
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
|
|
displayOutsideMaxExtent: true,
|
|
wrapDateLine: true,
|
|
attribution: attribution
|
|
});
|
|
map.addLayer(mapnik);
|
|
} else if (args.layer == "cyclemap" || args.layer == "cycle map") {
|
|
var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
|
|
displayOutsideMaxExtent: true,
|
|
wrapDateLine: true,
|
|
attribution: attribution
|
|
});
|
|
map.addLayer(cyclemap);
|
|
} else if (args.layer == "transportmap") {
|
|
var transportmap = new OpenLayers.Layer.OSM.TransportMap("Transport Map", {
|
|
displayOutsideMaxExtent: true,
|
|
wrapDateLine: true,
|
|
attribution: attribution
|
|
});
|
|
map.addLayer(transportmap);
|
|
} else if (args.layer == "mapquest") {
|
|
var mapquestmap = new OpenLayers.Layer.OSM("MapQuest Open Map", [
|
|
"http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
|
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
|
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
|
|
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"], {
|
|
displayOutsideMaxExtent: true,
|
|
wrapDateLine: true,
|
|
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'>"
|
|
});
|
|
map.addLayer(mapquestmap);
|
|
}
|
|
|
|
if (args.marker) {
|
|
var markers = new OpenLayers.Layer.Markers();
|
|
map.addLayer(markers);
|
|
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
|
|
map.marker = true;
|
|
}
|
|
|
|
if (args.bbox) {
|
|
var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
|
|
map.zoomToExtent(bounds)
|
|
} else {
|
|
map.zoomToMaxExtent();
|
|
}
|
|
|
|
var size = map.getSize();
|
|
if (size.h > 320) {
|
|
map.addControl(new OpenLayers.Control.PanZoomBar());
|
|
} else {
|
|
map.addControl(new OpenLayers.Control.Zoom());
|
|
}
|
|
}
|
|
// -->
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<div id="map"></div>
|
|
</body>
|
|
</html>
|