Merge pull request #11416 from MoonE/examples-add-labels-to-inputs

Examples add labels to inputs

examples/cluster.html

@@ -8,6 +8,6 @@ tags: "cluster, vector"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>cluster distance</label>
+  <label for="distance">cluster distance</label>
   <input id="distance" type="range" min="0" max="100" step="1" value="40"/>
 </form>

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

@@ -9,18 +9,18 @@ tags: "color, hue, lightness, chroma"
 <div id="map" class="map"></div>
 <table class="controls">
   <tr>
-    <td>hue</td>
-    <td><span id="hueOut"></span>°</td>
+    <td><label for="hue">hue</label></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><label for="chroma">chroma</label></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><label for="lightness">lightness</label></td>
     <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
+    <td><span id="lightnessOut"></span> %</td>
   </tr>
 </table>

examples/draw-and-modify-features.html

@@ -8,7 +8,7 @@ tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
     <option value="LineString">LineString</option>

examples/draw-features.html

@@ -11,7 +11,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Point">Point</option>
     <option value="LineString">LineString</option>

examples/draw-freehand.html

@@ -12,7 +12,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="LineString">LineString</option>
     <option value="Polygon">Polygon</option>

examples/draw-shapes.html

@@ -15,7 +15,7 @@ tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Shape type &nbsp;</label>
+  <label for="type">Shape type &nbsp;</label>
   <select id="type">
     <option value="Circle">Circle</option>
     <option value="Square">Square</option>

examples/export-pdf.html

@@ -14,7 +14,7 @@ resources:
   </div>
 </div>
 <form class="form">
-  <label>Page size </label>
+  <label for="format">Page size </label>
   <select id="format">
     <option value="a0">A0 (slow)</option>
     <option value="a1">A1</option>
@@ -23,7 +23,7 @@ resources:
     <option value="a4" selected>A4</option>
     <option value="a5">A5 (fast)</option>
   </select>
-  <label>Resolution </label>
+  <label for="resolution">Resolution </label>
   <select id="resolution">
     <option value="72">72 dpi (fast)</option>
     <option value="150">150 dpi</option>

examples/filter-points-webgl.html

@@ -19,8 +19,8 @@ experimental: true
 <form>
   <div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>
 
-  <label>Minimum year:</label>
+  <label for="min-year">Minimum year:</label>
   <input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
-  <label>Maximum year:</label>
+  <label for="max-year">Maximum year:</label>
   <input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
 </form>

examples/heatmap-earthquakes.html

@@ -8,8 +8,8 @@ tags: "heatmap, kml, vector, style, webgl"
 ---
 <div id="map" class="map"></div>
 <form>
-  <label>radius size</label>
+  <label for="radius">radius size</label>
   <input id="radius" type="range" min="1" max="50" step="1" value="5"/>
-  <label>blur size</label>
+  <label for="blur">blur size</label>
   <input id="blur" type="range" min="1" max="50" step="1" value="15"/>
 </form>

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>
-  <br />
-  <label>Hit tolerance for selecting features </label>
+  <label for="hitTolerance">Hit tolerance for selecting features: &nbsp;</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 />
-  Area: &nbsp;<canvas id="circle" style="vertical-align: middle"/>
+  &nbsp; Area: &nbsp;
+  <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/icon-sprite-webgl.html

@@ -21,6 +21,6 @@ cloak:
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>
 <div>
-  Filter by UFO shape:
+  <label for="shape-filter">Filter by UFO shape:</label>
   <select id="shape-filter"></select>
 </div>

examples/iiif.html

@@ -10,7 +10,7 @@ tags: "IIIF, IIIF Image API, tile source"
 <div id="map" class="map"></div>
 <div class="controls">
   <div id="iiif-notification">&nbsp;</div>
-  Enter <code>info.json</code> URL:
+  <label for="imageInfoUrl">Enter <code>info.json</code> URL:</label>
   <input type="text" id="imageInfoUrl" value="https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json">
   <button id="display">Display image</button>
 </div>

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) {
-  bindInputs('#layer' + i, layer);
-  if (layer instanceof LayerGroup) {
-    layer.getLayers().forEach(function (sublayer, j) {
-      bindInputs('#layer' + i + j, sublayer);
-    });
-  }
-});
+function setup(id, group) {
+  group.getLayers().forEach(function (layer, i) {
+    const layerid = id + i;
+    bindInputs(layerid, layer);
+    if (layer instanceof LayerGroup) {
+      setup(layerid, layer);
+    }
+  });
+}
+setup('#layer', map.getLayerGroup());
 
 $('#layertree li > span')
   .click(function () {

examples/measure.html

@@ -16,7 +16,7 @@ tags: "draw, edit, measure, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Measurement type &nbsp;</label>
+  <label for="type">Measurement type &nbsp;</label>
   <select id="type">
     <option value="length">Length (LineString)</option>
     <option value="area">Area (Polygon)</option>

examples/mouse-position.html

@@ -9,11 +9,11 @@ tags: "mouse-position, openstreetmap"
 <div id="map" class="map"></div>
 <div id="mouse-position"></div>
 <form>
-  <label>Projection </label>
+  <label for="projection">Projection </label>
   <select id="projection">
     <option value="EPSG:4326">EPSG:4326</option>
     <option value="EPSG:3857">EPSG:3857</option>
   </select>
-  <label>Precision </label>
+  <label for="precision">Precision</label>
   <input id="precision" type="number" min="0" max="12" value="4"/>
 </form>

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>right</label><input type="text" id="right"><br>
-<label>bottom</label><input type="text" id="bottom">
-<label>left</label><input type="text" id="left">
+<label>left: <input readonly="readonly" type="text" id="left"></label>
+<label>right: <input readonly="readonly" type="text" id="right"></label>
+<label>bottom: <input readonly="readonly" type="text" id="bottom"></label>
+<label>top: <input readonly="readonly" type="text" id="top"></label>

examples/overviewmap-custom.html

@@ -11,4 +11,4 @@ cloak:
 
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="rotateWithView">Rotate with view</div>
+<div><label><input type="checkbox" id="rotateWithView"> Rotate with view</label></div>

examples/print-to-scale.html

@@ -18,7 +18,7 @@ resources:
   <div id="map" class="map"></div>
 </div>
 <form class="form">
-  <label>Page size </label>
+  <label for="format">Page size </label>
   <select id="format">
     <option value="a0">A0 (slow)</option>
     <option value="a1">A1</option>
@@ -27,14 +27,14 @@ resources:
     <option value="a4" selected>A4</option>
     <option value="a5">A5 (fast)</option>
   </select>
-  <label>Resolution </label>
+  <label for="resolution">Resolution </label>
   <select id="resolution">
     <option value="72">72 dpi (fast)</option>
     <option value="150">150 dpi</option>
     <option value="200" selected>200 dpi</option>
     <option value="300">300 dpi (slow)</option>
   </select>
-  <label>Scale </label>
+  <label for="scale">Scale </label>
   <select id="scale">
     <option value="500">1:500000</option>
     <option value="250" selected>1:250000</option>

examples/region-growing.css

@@ -1,4 +1,6 @@
-table.controls td {
-  min-width: 110px;
-  padding: 2px 5px;
+.map {
+  cursor: pointer;
+}
+#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>
-<table class="controls">
-  <tr>
-    <td>Threshold: <span id="threshold-value"></span></td>
-    <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
-  </tr>
-</table>
+<div id="map" class="map"></div>
+<div>
+  <label class="input-group">
+    Threshold:
+    <input id="threshold" type="range" min="1" max="50" value="20">
+    <span id="threshold-value"></span>
+  </label>
+</div>

examples/reprojection-image.html

@@ -7,4 +7,7 @@ docs: >
 tags: "reprojection, projection, proj4js, image, imagestatic"
 ---
 <div id="map" class="map"></div>
-<div><input type="checkbox" id="imageSmoothing" checked />Image smoothing</div>
+<div>
+  <input type="checkbox" id="imageSmoothing" checked />
+  <label for="imageSmoothing">Image smoothing</label>
+</div>

examples/reprojection.html

@@ -9,14 +9,14 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
 <div id="map" class="map"></div>
 <form class="form-inline">
   <div class="col-md-3">
-    <label>Base map:</label>
+    <label for="base-layer">Base map:</label>
     <select id="base-layer">
       <option value="osm">OSM (EPSG:3857)</option>
       <option value="wms4326">WMS (EPSG:4326)</option>
     </select>
   </div>
   <div class="col-md-4">
-    <label>Overlay map:</label>
+    <label for="overlay-layer">Overlay map:</label>
     <select id="overlay-layer">
       <option value="bng">British National Grid (EPSG:27700)</option>
       <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
@@ -25,7 +25,7 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
     </select>
   </div>
   <div class="col-md-5">
-    <label>View projection:</label>
+    <label for="view-projection">View projection:</label>
     <select id="view-projection">
       <option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
       <option value="EPSG:4326">WGS 84 (EPSG:4326)</option>

examples/scale-line.html

@@ -28,5 +28,5 @@ tags: "scale-line, openstreetmap"
 </select>
 
 <div id="showScaleTextDiv" style="display:none">
-  <input type="checkbox" id="showScaleText" checked>Show scale text
+  <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
 </div>

examples/select-features.html

@@ -10,13 +10,13 @@ tags: "select, vector"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Action type &nbsp;</label>
-    <select id="type" class="form-control">
-      <option value="click" selected>Click</option>
-      <option value="singleclick">Single-click</option>
-      <option value="pointermove">Hover</option>
-      <option value="altclick">Alt+Click</option>
-      <option value="none">None</option>
-    </select>
+  <label for="type">Action type &nbsp;</label>
+  <select id="type" class="form-control">
+    <option value="click" selected>Click</option>
+    <option value="singleclick">Single-click</option>
+    <option value="pointermove">Hover</option>
+    <option value="altclick">Alt+Click</option>
+    <option value="none">None</option>
+  </select>
   <span id="status">&nbsp;0 selected features</span>
 </form>

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><label for="vert">vertical exaggeration:</label></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><label for="sunEl">sun elevation:</label></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><label for="sunAz">sun azimuth:</label></td>
     <td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
+    <td><span id="sunAzOut"></span> °</td>
   </tr>
 </table>

examples/snap.html

@@ -24,7 +24,7 @@ tags: "draw, edit, modify, vector, snap"
     </label>
   </div>
   <div class="form-group">
-    <label>Draw type &nbsp;</label>
+    <label for="draw-type">Draw type &nbsp;</label>
     <select name="draw-type" id="draw-type">
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>

examples/tracing.html

@@ -13,7 +13,7 @@ tags: "draw, trace, snap, vector, topology"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Geometry type &nbsp;</label>
+  <label for="type">Geometry type &nbsp;</label>
   <select id="type">
     <option value="Polygon">Polygon</option>
     <option value="LineString">LineString</option>

examples/vector-esri-edit.html

@@ -10,7 +10,7 @@ resources:
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Draw or modify &nbsp;</label>
+  <label for="type">Draw or modify &nbsp;</label>
   <select id="type">
     <option value="DRAW">Draw</option>
     <option value="MODIFY">Modify</option>

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: 4px;
+  padding: 10px;
   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;
-  float: left;
+  display: inline-block;
   width: 85px;
 }
 
-.edit-form-elem input[type="text"] {
-  width: 60px;
-}
-
+.edit-form-elem input[type="text"],
 .edit-form-elem select {
   width: 130px;
 }
-
-.edit-form br {
-  clear: left;
-}
-
-.clearall {
-  clear: both;
-}

examples/vector-labels.html

@@ -16,7 +16,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-points" type="button" value="Refresh" />
   <h2>Points</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="points-text">Text: </label>
     <select id="points-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
@@ -24,7 +24,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="points-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="points-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -41,7 +41,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="points-align">Align: </label>
     <select id="points-align">
       <option value="center" selected="selected">Center</option>
       <option value="end">End</option>
@@ -50,7 +50,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="points-baseline">Baseline: </label>
     <select id="points-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -60,14 +60,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="points-rotation">Rotation: </label>
     <select id="points-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="points-font">Font: </label>
     <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
       <option value="'Courier New'">Courier New</option>
@@ -75,50 +75,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="points-weight">Weight: </label>
     <select id="points-weight">
       <option value="bold">Bold</option>
       <option value="normal" selected="selected">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="points-placement">Placement: </label>
     <select disabled id="points-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="points-maxangle">Max Angle: </label>
     <select disabled id="points-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="points-overflow">Exceed Len: </label>
     <select disabled id="points-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="points-size">Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
-    <label>Line height: </label>
+    <label for="points-height">Line height: </label>
     <input type="text" value="1" id="points-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="points-offset-x">Offset X: </label>
     <input type="text" value="0" id="points-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="points-offset-y">Offset Y: </label>
     <input type="text" value="0" id="points-offset-y" />
     <br />
-    <label>Color :</label>
+    <label for="points-color">Color: </label>
     <input type="text" value="#aa3300" id="points-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="points-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="points-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label for="points-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="points-outline-width" />
   </div>
 </div>
@@ -127,7 +127,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-lines" type="button" value="Refresh" />
   <h2>Lines</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="lines-text">Text: </label>
     <select id="lines-text">
       <option value="hide">Hide</option>
       <option value="normal">Normal</option>
@@ -135,7 +135,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap" selected="selected">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="lines-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="lines-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -152,7 +152,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="lines-align">Align: </label>
     <select id="lines-align">
       <option value="" selected="selected"></option>
       <option value="center">Center</option>
@@ -162,7 +162,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="lines-baseline">Baseline: </label>
     <select id="lines-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -172,14 +172,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="lines-rotation">Rotation: </label>
     <select id="lines-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="lines-font">Font: </label>
     <select id="lines-font">
       <option value="Arial">Arial</option>
       <option value="'Courier New'" selected="selected">Courier New</option>
@@ -187,50 +187,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="lines-weight">Weight: </label>
     <select id="lines-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="lines-placement">Placement: </label>
     <select id="lines-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="lines-maxangle">Max Angle: </label>
     <select id="lines-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="lines-overflow">Exceed Len: </label>
     <select id="lines-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="lines-size">Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
-    <label>Line height: </label>
+    <label for="lines-height">Line height: </label>
     <input type="text" value="1.2" id="lines-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="lines-offset-x">Offset X: </label>
     <input type="text" value="0" id="lines-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="lines-offset-y">Offset Y: </label>
     <input type="text" value="0" id="lines-offset-y" />
     <br />
-    <label>Color :</label>
+    <label for="lines-color">Color: </label>
     <input type="text" value="green" id="lines-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="lines-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="lines-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label for="lines-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="lines-outline-width" />
   </div>
 </div>
@@ -239,7 +239,7 @@ tags: "geojson, vector, openstreetmap, label"
   <input id="refresh-polygons" type="button" value="Refresh" />
   <h2>Polygons</h2>
   <div class="edit-form-elem">
-    <label>Text: </label>
+    <label for="polygons-text">Text: </label>
     <select id="polygons-text">
       <option value="hide">Hide</option>
       <option value="normal" selected="selected">Normal</option>
@@ -247,7 +247,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="wrap">Wrap</option>
     </select>
     <br />
-    <label title="Max Resolution Denominator">MaxReso.:</label>
+    <label for="polygons-maxreso" title="Max Resolution Denominator">MaxReso.: </label>
     <select id="polygons-maxreso">
       <option value="38400">38,400</option>
       <option value="19200">19,200</option>
@@ -264,7 +264,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="8">8</option>
     </select>
     <br />
-    <label>Align: </label>
+    <label for="polygons-align">Align: </label>
     <select id="polygons-align">
       <option value="" selected="selected"></option>
       <option value="center">Center</option>
@@ -274,7 +274,7 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="start">Start</option>
     </select>
     <br />
-    <label>Baseline: </label>
+    <label for="polygons-baseline">Baseline: </label>
     <select id="polygons-baseline">
       <option value="alphabetic">Alphabetic</option>
       <option value="bottom">Bottom</option>
@@ -284,14 +284,14 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="top">Top</option>
     </select>
     <br />
-    <label>Rotation: </label>
+    <label for="polygons-rotation">Rotation: </label>
     <select id="polygons-rotation">
       <option value="0">0°</option>
       <option value="0.785398164">45°</option>
       <option value="1.570796327">90°</option>
     </select>
     <br />
-    <label>Font: </label>
+    <label for="polygons-font">Font: </label>
     <select id="polygons-font">
       <option value="Arial">Arial</option>
       <option value="'Courier New'">Courier New</option>
@@ -299,51 +299,50 @@ tags: "geojson, vector, openstreetmap, label"
       <option value="Verdana" selected="selected">Verdana</option>
     </select>
     <br />
-    <label>Weight: </label>
+    <label for="polygons-weight">Weight: </label>
     <select id="polygons-weight">
       <option value="bold" selected="selected">Bold</option>
       <option value="normal">Normal</option>
     </select>
     <br />
-    <label>Placement: </label>
+    <label for="polygons-placement">Placement: </label>
     <select id="polygons-placement">
       <option value="line">Line</option>
       <option value="point" selected="selected">Point</option>
     </select>
     <br />
-    <label>Max Angle: </label>
+    <label for="polygons-maxangle">Max Angle: </label>
     <select id="polygons-maxangle">
       <option value="0.7853981633974483" selected="selected">45°</option>
       <option value="2.0943951023931953">120°</option>
       <option value="6.283185307179586">360°</option>
     </select>
     <br />
-    <label>Exceed Len: </label>
+    <label for="polygons-overflow">Exceed Len: </label>
     <select id="polygons-overflow">
       <option value="true">True</option>
       <option value="false" selected="selected">False</option>
     </select>
     <br />
-    <label>Size: </label>
+    <label for="polygons-size">Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />
-    <label>Line height: </label>
+    <label for="polygons-height">Line height: </label>
     <input type="text" value="1" id="polygons-height" />
     <br />
-    <label>Offset X:</label>
+    <label for="polygons-offset-x">Offset X: </label>
     <input type="text" value="0" id="polygons-offset-x" />
     <br />
-    <label>Offset Y:</label>
+    <label for="polygons-offset-y">Offset Y: </label>
     <input type="text" value="0" id="polygons-offset-y" />
     <br />
-    <label>Color :</label>
+    <label for="polygons-color">Color: </label>
     <input type="text" value="blue" id="polygons-color" />
     <br />
-    <label title="Outline Color">O. Color:</label>
+    <label for="polygons-outline" title="Outline Color">O. Color: </label>
     <input type="text" value="#ffffff" id="polygons-outline" />
     <br />
-    <label title="Outline Width">O. Width :</label>
+    <label for="polygons-outline-width" title="Outline Width">O. Width: </label>
     <input type="text" value="3" id="polygons-outline-width" />
   </div>
 </div>
-<div class="clearall"></div>

examples/vector-tile-selection.html

@@ -15,7 +15,7 @@ tags: "vector tiles, selection"
 ---
 <div id="map" class="map"></div>
 <form class="form-inline">
-  <label>Action type &nbsp;</label>
+  <label for="type">Action type &nbsp;</label>
   <select id="type" class="form-control">
     <option value="singleselect" selected>Single Select</option>
     <option value="multiselect">Multi Select</option>

examples/webgl-points-layer.html

@@ -70,7 +70,7 @@ experimental: true
 ---
 
 <div id="map" class="map"></div>
-<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
+Choose a predefined style from the list below or edit it as JSON manually.
 <select id="style-select">
   <option value="icons">Icons</option>
   <option value="triangles">Triangles, color related to population</option>