index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Basic OSM Example with zoom level display</title>
<link rel="stylesheet" href="//www.openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="//www.openlayers.org/dev/examples/style.css" type="text/css">
<style>
.smallmap {
border: 1px solid #CCCCCC;
height: 720px;
width: 1024px;
}
</style>
<script src="//www.openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function setDomElement(dom_element) {
var text = map.getZoom() + " and the scale is " + map.getScale();
if (dom_element.textContent) {
dom_element.textContent = text;
} else {
dom_element.innerText = text;
}
}
function init() {
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.OSM("Simple OSM Map");
map.addLayer(layer);
var zoomInit = 6;
map.setCenter(
new OpenLayers.LonLat(-0.18, 46.69).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()), zoomInit);
selectIdInit = document.getElementById("currentZoom");
setDomElement(selectIdInit);
map.events.register("zoomend", map, function () {
selectId = document.getElementById("currentZoom");
setDomElement(selectId);
});
};
</script>
</head>
<body onload="init()">
<h1 id="title">Basic OSM Example</h1>
<div id="tags">
openstreetmap basic light
</div>
<div id="shortdesc">Show a Simple OSM Map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows a very simple OSM layout with minimal controls.</p>
<p>It also displays current zoom level <span id="currentZoom">12</span></p>
</div>
</body>
</html>