--- step-5/index.html 2023-07-02 13:20:09.119154723 +0000
+++ step-6/index.html 2023-07-02 13:20:09.119154723 +0000
@@ -1,6 +1,6 @@
<html>
<head>
- <title>Step 5: moving the attribution text</title>
+ <title>Step 6: adding a scale ruler</title>
<script src="../OpenLayers.js"></script>
<script src="../OpenStreetMap.js"></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -13,6 +13,13 @@
padding: 4px;
opacity: 0.60;
}
+ .olControlScaleLine {
+ bottom: 0px;
+ left: 0px;
+ background-color:white;
+ padding: 4px;
+ opacity: 0.60;
+ }
</style>
<script>
@@ -26,11 +33,15 @@
overviewMap = new OpenLayers.Control.OverviewMap();
+ scale = new OpenLayers.Control.ScaleLine();
+ scale.geodesic = true; // get the scale projection right, at least on small zoom levels
+
map = new OpenLayers.Map("demoMap",
{ theme: null,
controls: [ new OpenLayers.Control.Navigation(), // direct panning via mouse drag
new OpenLayers.Control.Attribution(), // attribution text
new OpenLayers.Control.PanZoomBar(), // larger navigation control
+ scale, // scale ruler
overviewMap // overview map
]
}