openstreetmap-website/public/export/embed.html

112 lines
3.9 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
.olControlAttribution {
bottom: 3px!important;
}
</style>
<script src="http://openstreetmap.org/openlayers/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var map, layer;
function localUpdateLink() {
var center = this.map.getCenter();
// Map not initialized yet. Break out of this function.
if (!center) {
return;
}
var params = OpenLayers.Util.getParameters(this.base);
params.zoom = this.map.getZoom();
var lat = center.lat;
var lon = center.lon;
if (this.displayProjection) {
var mapPosition = OpenLayers.Projection.transform(
{ x: lon, y: lat },
this.map.getProjectionObject(),
this.displayProjection );
lon = mapPosition.x;
lat = mapPosition.y;
}
if (this.map.marker) {
params.lat = Math.round(lat*100000)/100000;
params.lon = Math.round(lon*100000)/100000;
} else {
params.mlat = Math.round(lat*100000)/100000;
params.mlon = Math.round(lon*100000)/100000;
}
var href = this.base;
if(href.indexOf('?') != -1) {
href = href.substring( 0, href.indexOf('?') );
}
href += '?' + OpenLayers.Util.getParameterString(params);
this.element.href = href;
}
function init(){
OpenLayers.Lang.en.permalink = "Larger Map";
map = new OpenLayers.Map ("map", {
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Permalink(null, "http://openstreetmap.org/", { updateLink: localUpdateLink })
],
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 mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
displayOutsideMaxExtent: true,
wrapDateLine: true,
attribution: '<a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>'
});
map.addLayer(mapnik);
var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
displayOutsideMaxExtent: true,
wrapDateLine: true,
attribution: '<a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>'
});
map.addLayer(osmarender);
var args = OpenLayers.Util.getParameters();
if (args.marker && map.getCenter()) {
var markers = new OpenLayers.Layer.Markers();
map.addLayer(markers);
markers.addMarker( new OpenLayers.Marker(map.getCenter()));
map.marker = true;
}
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
var size = map.getSize();
if (size.h > 320) {
map.addControl(new OpenLayers.Control.PanZoomBar());
} else {
map.addControl(new OpenLayers.Control.PanZoom());
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>