Update some example styles / formatting

examples/color-manipulation.css

@@ -1,5 +1,7 @@
 table.controls td {
-  text-align: center;
   padding: 2px 5px;
-  min-width: 60px;
+}
+table.controls td:nth-child(3) {
+  text-align: right;
+  min-width: 4.5em;
 }

examples/color-manipulation.html

@@ -10,17 +10,17 @@ tags: "color, hue, lightness, chroma"
 <table class="controls">
   <tr>
     <td>hue</td>
-    <td><span id="hueOut"></span>°</td>
     <td><input id="hue" type="range" min="-180" max="180" value="0"/></td>
+    <td><span id="hueOut"></span> °&nbsp;</td>
   </tr>
   <tr>
     <td>chroma</td>
-    <td><span id="chromaOut"></span> %</td>
     <td><input id="chroma" type="range" min="0" max="100" value="100"/></td>
+    <td><span id="chromaOut"></span> %</td>
   </tr>
   <tr>
     <td>lightness</td>
-    <td><span id="lightnessOut"></span> %</td>
     <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
+    <td><span id="lightnessOut"></span> %</td>
   </tr>
 </table>

examples/hit-tolerance.html

@@ -11,15 +11,14 @@ docs: >
 tags: "hitTolerance"
 ---
 <div id="map" class="map"></div>
+<span id="status">Try to click the line in the map.</span>
 <form class="form-inline">
-  <span id="status">&nbsp;No feature got hit.</span>
+  <label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</label>
-  <br />
-  <label>Hit tolerance for selecting features </label>
   <select id="hitTolerance" class="form-control">
     <option value="0" selected>0 Pixels</option>
     <option value="5">5 Pixels</option>
     <option value="10">10 Pixels</option>
   </select>
-  <br />
+  &nbsp; Area: &nbsp;
-  Area: &nbsp;<canvas id="circle" style="vertical-align: middle"/>
+  <canvas id="circle" style="vertical-align: middle" />
 </form>

examples/hit-tolerance.js

@@ -57,10 +57,10 @@ map.on('singleclick', function (e) {
   );
   if (hit) {
     style.getStroke().setColor('green');
-    statusElement.innerHTML = ' A feature got hit!';
+    statusElement.innerHTML = 'A feature got hit!';
   } else {
     style.getStroke().setColor('black');
-    statusElement.innerHTML = ' No feature got hit.';
+    statusElement.innerHTML = 'No feature got hit.';
   }
   feature.changed();
 });

examples/layer-group.css

@@ -1,3 +1,6 @@
 #layertree li > span {
   cursor: pointer;
-}
+}
+#layertree label {
+  display: block;
+}

examples/layer-group.html

@@ -18,37 +18,44 @@ cloak:
     <li><span>OSM layer</span>
       <fieldset id="layer0">
         <label class="checkbox" for="visible0">
-          <input id="visible0" class="visible" type="checkbox"/>visibility
+          visibile <input id="visible0" class="visible" type="checkbox"/>
+        </label>
+        <label>
+          opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
         </label>
-        <label>opacity</label>
-        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       </fieldset>
     </li>
-    <li><span>Layer group</span>
+    <li>
+      <span>Layer group</span>
       <fieldset id="layer1">
         <label class="checkbox" for="visible1">
-          <input id="visible1" class="visible" type="checkbox"/>visibility
+          visibile <input id="visible1" class="visible" type="checkbox"/>
+        </label>
+        <label>
+          opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
         </label>
-        <label>opacity</label>
-        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
       </fieldset>
       <ul>
-        <li><span>Food insecurity layer</span>
+        <li>
+          <span>Food insecurity layer</span>
           <fieldset id="layer10">
             <label class="checkbox" for="visible10">
-              <input id="visible10" class="visible" type="checkbox"/>visibility
+              visibile <input id="visible10" class="visible" type="checkbox"/>
+            </label>
+            <label>
+              opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
             </label>
-            <label>opacity</label>
-            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
           </fieldset>
         </li>
-        <li><span>World borders layer</span>
+        <li>
+          <span>World borders layer</span>
           <fieldset id="layer11">
             <label class="checkbox" for="visible11">
-              <input id="visible11" class="visible" type="checkbox"/>visibility
+              visibile <input id="visible11" class="visible" type="checkbox"/>
+            </label>
+            <label>
+              opacity <input class="opacity" type="range" min="0" max="1" step="0.01"/>
             </label>
-            <label>opacity</label>
-            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
           </fieldset>
         </li>
       </ul>

examples/layer-group.js

@@ -49,19 +49,21 @@ function bindInputs(layerid, layer) {
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input change', function () {
+  opacityInput.on('input', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));
 }
-map.getLayers().forEach(function (layer, i) {
+function setup(id, group) {
-  bindInputs('#layer' + i, layer);
+  group.getLayers().forEach(function (layer, i) {
-  if (layer instanceof LayerGroup) {
+    const layerid = id + i;
-    layer.getLayers().forEach(function (sublayer, j) {
+    bindInputs(layerid, layer);
-      bindInputs('#layer' + i + j, sublayer);
+    if (layer instanceof LayerGroup) {
-    });
+      setup(layerid, layer);
-  }
+    }
-});
+  });
+}
+setup('#layer', map.getLayerGroup());
 
 $('#layertree li > span')
   .click(function () {

examples/moveend.html

@@ -3,11 +3,15 @@ layout: example.html
 title: Moveend Event
 shortdesc: Use of the moveend event.
 docs: >
-  <p>In this example, a listener is registered for the map's <code>moveend</code> event.  Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
+  <p>
+    In this example, a listener is registered for the map's
+    <code>moveend</code> event.  Whenever this listener is called,
+    it updates the inputs below with the map extent in decimal degrees.
+  </p>
 tags: "moveend, map, event"
 ---
 <div id="map" class="map"></div>
-<label>top</label><input type="text" id="top">
+<label>left:</label> <input readonly="readonly" type="text" id="left">
-<label>right</label><input type="text" id="right"><br>
+<label>right:</label> <input readonly="readonly" type="text" id="right">
-<label>bottom</label><input type="text" id="bottom">
+<label>bottom:</label> <input readonly="readonly" type="text" id="bottom">
-<label>left</label><input type="text" id="left">
+<label>top:</label> <input readonly="readonly" type="text" id="top">

examples/region-growing.css

@@ -1,4 +1,6 @@
-table.controls td {
+.map {
-  min-width: 110px;
+  cursor: pointer;
-  padding: 2px 5px;
+}
+#threshold {
+  margin: 0 0.6em;
 }

examples/region-growing.html

@@ -28,10 +28,11 @@ cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
 ---
-<div id="map" class="map" style="cursor: pointer"></div>
+<div id="map" class="map"></div>
-<table class="controls">
+<div>
-  <tr>
+  <label class="input-group">
-    <td>Threshold: <span id="threshold-value"></span></td>
+    Threshold:
-    <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
+    <input id="threshold" type="range" min="1" max="50" value="20">
-  </tr>
+    <span id="threshold-value"></span>
-</table>
+  </label>
+</div>

examples/shaded-relief.css

@@ -1,4 +1,7 @@
 table.controls td {
-  text-align: center;
   padding: 2px 5px;
 }
+table.controls td:nth-child(3) {
+  text-align: right;
+  min-width: 3em;
+}

examples/shaded-relief.html

@@ -28,15 +28,18 @@ tags: "raster, shaded relief"
 <div id="map" class="map"></div>
 <table class="controls">
   <tr>
-    <td>vertical exaggeration: <span id="vertOut"></span>x</td>
+    <td>vertical exaggeration:</td>
     <td><input id="vert" type="range" min="1" max="5" value="1"/></td>
+    <td><span id="vertOut"></span> x</td>
   </tr>
   <tr>
-    <td>sun elevation: <span id="sunElOut"></span>°</td>
+    <td>sun elevation:</td>
     <td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
+    <td><span id="sunElOut"></span> °</td>
   </tr>
   <tr>
-    <td>sun azimuth: <span id="sunAzOut"></span>°</td>
+    <td>sun azimuth:</td>
     <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
+    <td><span id="sunAzOut"></span> °</td>
   </tr>
 </table>

examples/vector-labels.css

@@ -1,21 +1,13 @@
-h2 {
-  font-size: 1.5em;
-  line-height: 15px;
-}
-
-.scale-cnt {
-  margin: 5px;
-}
-
-.edit-form-ctn {
-}
-
 .edit-form {
-  float: left;
+  display: inline-block;
   margin: 5px;
-  width: 230px;
+  padding: 10px;
-  padding: 4px;
   border: 1px solid black;
+  white-space: nowrap;
+}
+
+.edit-form h2 {
+  font-size: 1.5em;
 }
 
 .edit-form input[type="button"] {
@@ -23,23 +15,11 @@ h2 {
 }
 
 .edit-form-elem label {
-  display: block;
+  display: inline-block;
-  float: left;
   width: 85px;
 }
 
-.edit-form-elem input[type="text"] {
+.edit-form-elem input[type="text"],
-  width: 60px;
-}
-
 .edit-form-elem select {
   width: 130px;
 }
-
-.edit-form br {
-  clear: left;
-}
-
-.clearall {
-  clear: both;
-}

examples/vector-labels.html

@@ -112,13 +112,13 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Offset Y:</label>
     <input type="text" value="0" id="points-offset-y" />
     <br />
-    <label>Color :</label>
+    <label>Color:</label>
     <input type="text" value="#aa3300" id="points-color" />
     <br />
     <label title="Outline Color">O. Color:</label>
     <input type="text" value="#ffffff" id="points-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label title="Outline Width">O. Width:</label>
     <input type="text" value="3" id="points-outline-width" />
   </div>
 </div>
@@ -224,13 +224,13 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Offset Y:</label>
     <input type="text" value="0" id="lines-offset-y" />
     <br />
-    <label>Color :</label>
+    <label>Color:</label>
     <input type="text" value="green" id="lines-color" />
     <br />
     <label title="Outline Color">O. Color:</label>
     <input type="text" value="#ffffff" id="lines-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label title="Outline Width">O. Width:</label>
     <input type="text" value="3" id="lines-outline-width" />
   </div>
 </div>
@@ -336,14 +336,13 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Offset Y:</label>
     <input type="text" value="0" id="polygons-offset-y" />
     <br />
-    <label>Color :</label>
+    <label>Color:</label>
     <input type="text" value="blue" id="polygons-color" />
     <br />
     <label title="Outline Color">O. Color:</label>
     <input type="text" value="#ffffff" id="polygons-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label title="Outline Width">O. Width:</label>
     <input type="text" value="3" id="polygons-outline-width" />
   </div>
 </div>
-<div class="clearall"></div>