[OpenLayers-Commits] r5664 - in sandbox/tschaub/scalebar: examples lib/OpenLayers/Control theme/default
commits at openlayers.org
commits at openlayers.org
Mon Jan 7 01:08:53 EST 2008
Author: tschaub
Date: 2008-01-07 01:08:53 -0500 (Mon, 07 Jan 2008)
New Revision: 5664
Added:
sandbox/tschaub/scalebar/examples/scalebar-thin.html
Modified:
sandbox/tschaub/scalebar/examples/scalebar.html
sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js
sandbox/tschaub/scalebar/theme/default/style.css
Log:
add example of with style
Added: sandbox/tschaub/scalebar/examples/scalebar-thin.html
===================================================================
--- sandbox/tschaub/scalebar/examples/scalebar-thin.html (rev 0)
+++ sandbox/tschaub/scalebar/examples/scalebar-thin.html 2008-01-07 06:08:53 UTC (rev 5664)
@@ -0,0 +1,159 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>OpenLayers ScaleBar Example</title>
+
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <style type="text/css">
+ body {
+ font-family: sans-serif;
+ font-size: 0.9em;
+ }
+ #map {
+ width: 512px;
+ height: 256px;
+ border: 1px solid gray;
+ }
+ #docs {
+ width: 512px;
+ margin: 1em 0;
+ }
+
+ .olControlScaleBar {
+ bottom: 10px;
+ left: 10px;
+ font-family: sans-serif;
+ color: #333;
+ }
+ .olControlScaleBarBar {
+ height: 1px;
+ top: 14px;
+ background: #333;
+ }
+ .olControlScaleBarBarAlt {
+ height: 1px;
+ top: 14px;
+ background: #333;
+ }
+ .olControlScaleBarMarkerMajor {
+ height: 7px;
+ width: 1px;
+ top: 11px;
+ background: #333;
+ }
+ .olControlScaleBarMarkerMinor {
+ height: 5px;
+ width: 1px;
+ top: 12px;
+ background: #333;
+ }
+ .olControlScaleBarNumbersBox {
+ top: 21px;
+ font-size: 0.7em;
+ }
+ .olControlScaleBarLabelBox {
+ top: -2px;
+ font-size: 0.8em;
+ font-variant: small-caps;
+ }
+ .olControlScaleBarLabelBoxSingleLine {
+ top: 0px;
+ font-size: 0.8em;
+ }
+
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+
+ var map, scalebar;
+
+ function init(){
+
+ map = new OpenLayers.Map('map');
+
+ var layer = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://labs.metacarta.com/wms/vmap0",
+ {layers: 'basic'}
+ );
+
+ map.addLayer(layer);
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+
+ scalebar = new OpenLayers.Control.ScaleBar();
+ map.addControl(scalebar);
+
+ map.zoomToMaxExtent();
+ }
+
+
+ function updateProperties() {
+ var displaySystem = document.getElementById("displaySystem").value;
+ scalebar.displaySystem = displaySystem;
+ var divEl = document.getElementById("divisions");
+ var divisions = parseInt(divEl.value);
+ divisions = Math.max(1, Math.min(isNaN(divisions) ? 0 : divisions, 4));
+ divEl.value = divisions;
+ scalebar.divisions = divisions;
+ var subEl = document.getElementById("subdivisions");
+ var subdivisions = parseInt(subEl.value);
+ subdivisions = Math.max(1, Math.min(isNaN(subdivisions) ? 0 : subdivisions, 4));
+ subEl.value = subdivisions;
+ scalebar.subdivisions = subdivisions;
+ scalebar.showMinorMeasures = document.getElementById("showMinorMeasures").checked;
+ scalebar.singleLine = document.getElementById("singleLine").checked;
+ scalebar.abbreviateLabel = document.getElementById("abbreviateLabel").checked;
+ scalebar.update();
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">OpenLayers Styled ScaleBar Example</h1>
+
+ <div id="tags"></div>
+
+ <p id="shortdesc">
+ Demonstrate a map with a scale bar with non-default style.
+ </p>
+
+ <div id="map"></div>
+
+ <div id="docs">
+ Set properties for the scale bar with the options argument for the
+ constructor. Scale bar style (including bar color/graphics) is
+ controlled with CSS. See the default style.css for scale bar related
+ selectors. To use CSS with the scale bar, add linked stylesheets or
+ inline style declarations after linking the default stylesheet (as
+ with this page).
+ </div>
+
+ <div>
+ <select name="displaySystem" id="displaySystem"
+ onchange="updateProperties();">
+ <option value="metric" selected="selected">metric</option>
+ <option value="english">english</option>
+ </select>
+ display system
+ <br />
+ <input type="text" id="divisions" maxlength="2" size="2"
+ onchange="updateProperties();" value="2" />
+ <label for="divisions">major divisions</label>
+ <br />
+ <input type="text" id="subdivisions" maxlength="2" size="2"
+ onchange="updateProperties();" value="2" />
+ <label for="divisions">subdivisions per major division</label>
+ <br />
+ <input type="checkbox" id="abbreviateLabel"
+ onclick="updateProperties();" />
+ <label for="abbreviateLabel">abbreviated label</label>
+ <br />
+ <input type="checkbox" id="showMinorMeasures"
+ onclick="updateProperties();" />
+ <label for="showMinorMeasures">show subdivision measures (use CSS to reduce font size)</label>
+ <br />
+ <input type="checkbox" id="singleLine"
+ onclick="updateProperties();" />
+ <label for="singleLine">single line display (best with abbreviated label)</label>
+ <br />
+ </div>
+ </body>
+</html>
Modified: sandbox/tschaub/scalebar/examples/scalebar.html
===================================================================
--- sandbox/tschaub/scalebar/examples/scalebar.html 2008-01-07 00:36:18 UTC (rev 5663)
+++ sandbox/tschaub/scalebar/examples/scalebar.html 2008-01-07 06:08:53 UTC (rev 5664)
@@ -16,6 +16,7 @@
#docs {
width: 512px;
margin: 1em 0;
+ }
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
Modified: sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js
===================================================================
--- sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js 2008-01-07 00:36:18 UTC (rev 5663)
+++ sandbox/tschaub/scalebar/lib/OpenLayers/Control/ScaleBar.js 2008-01-07 06:08:53 UTC (rev 5664)
@@ -542,6 +542,7 @@
value = this.appliedStyles[selector][key];
} else {
selector = "." + this.displayClass + selector;
+ rules:
for(var i = document.styleSheets.length - 1; i >= 0; --i) {
var sheet = document.styleSheets[i];
if(!sheet.disabled) {
@@ -566,6 +567,7 @@
(rule.selectorText.toLowerCase() == selector.toLowerCase())) {
if(rule.style[key] != '') {
value = parseInt(rule.style[key]);
+ break rules;
}
}
}
Modified: sandbox/tschaub/scalebar/theme/default/style.css
===================================================================
--- sandbox/tschaub/scalebar/theme/default/style.css 2008-01-07 00:36:18 UTC (rev 5663)
+++ sandbox/tschaub/scalebar/theme/default/style.css 2008-01-07 06:08:53 UTC (rev 5664)
@@ -234,7 +234,7 @@
.olControlScaleBarLabelBoxSingleLine {
height: 15px;
width: 35px;
- top: 5px;
+ top: 0px;
left: 10px;
font-size: 13px;
}
More information about the Commits
mailing list