d97d3f76a6
In OpenLayers 2.12 the event handling of PanZoom and PanZoomBar clashes with the result that the zoom level changes by two steps every time one of the zoom buttons is pressed. Using the Zoom control fixes this issue.
107 lines
4.5 KiB
HTML
107 lines
4.5 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<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()
|
|
],
|
|
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
|
|
20037508.34,20037508.34),
|
|
numZoomLevels: 20,
|
|
maxResolution: 156543.0339,
|
|
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
|
units: 'm',
|
|
projection: new OpenLayers.Projection("EPSG:900913")
|
|
});
|
|
|
|
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>';
|
|
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>
|