diff --git a/examples/color-manipulation.css b/examples/color-manipulation.css index 674b2a5b21..b12be180ba 100644 --- a/examples/color-manipulation.css +++ b/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; } diff --git a/examples/color-manipulation.html b/examples/color-manipulation.html index d857128525..8aa8c667af 100644 --- a/examples/color-manipulation.html +++ b/examples/color-manipulation.html @@ -10,17 +10,17 @@ tags: "color, hue, lightness, chroma" - + - + - +
hue° ° 
chroma % %
lightness % %
diff --git a/examples/hit-tolerance.html b/examples/hit-tolerance.html index dc55ff516c..9b7d8c78b5 100644 --- a/examples/hit-tolerance.html +++ b/examples/hit-tolerance.html @@ -11,15 +11,14 @@ docs: > tags: "hitTolerance" ---
+Try to click the line in the map.
-  No feature got hit. -
- + -
- Area:   +   Area:   + diff --git a/examples/hit-tolerance.js b/examples/hit-tolerance.js index 443abb7ee5..e3cd1c3cea 100644 --- a/examples/hit-tolerance.js +++ b/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(); }); diff --git a/examples/layer-group.css b/examples/layer-group.css index 31cb3e6cf1..7018b0e597 100644 --- a/examples/layer-group.css +++ b/examples/layer-group.css @@ -1,3 +1,6 @@ #layertree li > span { cursor: pointer; -} \ No newline at end of file +} +#layertree label { + display: block; +} diff --git a/examples/layer-group.html b/examples/layer-group.html index 405bea1737..2083f1eda7 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -18,37 +18,44 @@ cloak:
  • OSM layer
    + - -
    • -
  • Layer group +
  • + Layer group
    + - -
      -
    • Food insecurity layer +
    • + Food insecurity layer
      + - -
      • -
    • World borders layer +
    • + World borders layer
      + - -
    diff --git a/examples/layer-group.js b/examples/layer-group.js index c6fd6b524b..c85ad3f72d 100644 --- a/examples/layer-group.js +++ b/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 () { diff --git a/examples/moveend.html b/examples/moveend.html index 8ecf4c4a03..7b14c00e35 100644 --- a/examples/moveend.html +++ b/examples/moveend.html @@ -3,11 +3,15 @@ layout: example.html title: Moveend Event shortdesc: Use of the moveend event. docs: > -

    In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.

    +

    + In this example, a listener is registered for the map's + moveend event. Whenever this listener is called, + it updates the inputs below with the map extent in decimal degrees. +

    tags: "moveend, map, event" ---
    - -
    - - + + + + diff --git a/examples/region-growing.css b/examples/region-growing.css index dd027637bb..fd66a76c65 100644 --- a/examples/region-growing.css +++ b/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; } diff --git a/examples/region-growing.html b/examples/region-growing.html index 17e1aca740..b387575658 100644 --- a/examples/region-growing.html +++ b/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/ --- -
    - - - - - -
    Threshold:
    +
    +
    + +
    diff --git a/examples/shaded-relief.css b/examples/shaded-relief.css index f829965da2..71748fd2dc 100644 --- a/examples/shaded-relief.css +++ b/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; +} diff --git a/examples/shaded-relief.html b/examples/shaded-relief.html index 116040ccb8..bf4be78789 100644 --- a/examples/shaded-relief.html +++ b/examples/shaded-relief.html @@ -28,15 +28,18 @@ tags: "raster, shaded relief"
    - + + - + + - + +
    vertical exaggeration: xvertical exaggeration: x
    sun elevation: °sun elevation: °
    sun azimuth: °sun azimuth: °
    diff --git a/examples/vector-labels.css b/examples/vector-labels.css index 55f55ee105..088402d239 100644 --- a/examples/vector-labels.css +++ b/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; -} diff --git a/examples/vector-labels.html b/examples/vector-labels.html index 687618a5ce..b57fe585dc 100644 --- a/examples/vector-labels.html +++ b/examples/vector-labels.html @@ -112,13 +112,13 @@ tags: "geojson, vector, openstreetmap, label"
    - +

    - + @@ -224,13 +224,13 @@ tags: "geojson, vector, openstreetmap, label"
    - +

    - + @@ -336,14 +336,13 @@ tags: "geojson, vector, openstreetmap, label"
    - +

    - + -