From 37e5529b22e3e80d1819bd69ea7ce56c6f28bf66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 1 Aug 2020 11:47:26 +0200 Subject: [PATCH 1/2] Update some example styles / formatting --- examples/color-manipulation.css | 6 +++-- examples/color-manipulation.html | 6 ++--- examples/hit-tolerance.html | 9 ++++---- examples/hit-tolerance.js | 4 ++-- examples/layer-group.css | 5 ++++- examples/layer-group.html | 37 ++++++++++++++++++------------- examples/layer-group.js | 20 +++++++++-------- examples/moveend.html | 14 +++++++----- examples/region-growing.css | 8 ++++--- examples/region-growing.html | 15 +++++++------ examples/shaded-relief.css | 5 ++++- examples/shaded-relief.html | 9 +++++--- examples/vector-labels.css | 38 ++++++++------------------------ examples/vector-labels.html | 13 +++++------ 14 files changed, 97 insertions(+), 92 deletions(-) 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"
    - +

    - + -
    From d2d10223592c99906dd25ed4c3fc62ee20b0d7db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 1 Aug 2020 11:47:26 +0200 Subject: [PATCH 2/2] Link labels to input elements --- examples/cluster.html | 2 +- examples/color-manipulation.html | 6 +- examples/draw-and-modify-features.html | 2 +- examples/draw-features.html | 2 +- examples/draw-freehand.html | 2 +- examples/draw-shapes.html | 2 +- examples/export-pdf.html | 4 +- examples/filter-points-webgl.html | 4 +- examples/heatmap-earthquakes.html | 4 +- examples/icon-sprite-webgl.html | 2 +- examples/iiif.html | 2 +- examples/measure.html | 2 +- examples/mouse-position.html | 4 +- examples/moveend.html | 8 +- examples/overviewmap-custom.html | 2 +- examples/print-to-scale.html | 6 +- examples/reprojection-image.html | 5 +- examples/reprojection.html | 6 +- examples/scale-line.html | 2 +- examples/select-features.html | 16 ++-- examples/shaded-relief.html | 6 +- examples/snap.html | 2 +- examples/tracing.html | 2 +- examples/vector-esri-edit.html | 2 +- examples/vector-labels.html | 102 ++++++++++++------------- examples/vector-tile-selection.html | 2 +- examples/webgl-points-layer.html | 2 +- 27 files changed, 102 insertions(+), 99 deletions(-) diff --git a/examples/cluster.html b/examples/cluster.html index 65c39a2236..70c52312a8 100644 --- a/examples/cluster.html +++ b/examples/cluster.html @@ -8,6 +8,6 @@ tags: "cluster, vector" ---
    - +
    diff --git a/examples/color-manipulation.html b/examples/color-manipulation.html index 8aa8c667af..8b6fc98d13 100644 --- a/examples/color-manipulation.html +++ b/examples/color-manipulation.html @@ -9,17 +9,17 @@ tags: "color, hue, lightness, chroma"
    - + - + - + diff --git a/examples/draw-and-modify-features.html b/examples/draw-and-modify-features.html index bf3ff2e7a4..9be38fc551 100644 --- a/examples/draw-and-modify-features.html +++ b/examples/draw-and-modify-features.html @@ -8,7 +8,7 @@ tags: "draw, edit, modify, vector, featureoverlay" ---
    - + diff --git a/examples/draw-freehand.html b/examples/draw-freehand.html index 8f6767a8a8..d6d84ccc5c 100644 --- a/examples/draw-freehand.html +++ b/examples/draw-freehand.html @@ -12,7 +12,7 @@ tags: "draw, edit, freehand, vector" ---
    - + diff --git a/examples/export-pdf.html b/examples/export-pdf.html index fa20f86069..00f92fa728 100644 --- a/examples/export-pdf.html +++ b/examples/export-pdf.html @@ -14,7 +14,7 @@ resources: - + - + - + diff --git a/examples/heatmap-earthquakes.html b/examples/heatmap-earthquakes.html index e20d7f58b0..becc60145a 100644 --- a/examples/heatmap-earthquakes.html +++ b/examples/heatmap-earthquakes.html @@ -8,8 +8,8 @@ tags: "heatmap, kml, vector, style, webgl" ---
    - + - + diff --git a/examples/icon-sprite-webgl.html b/examples/icon-sprite-webgl.html index 66e83e231e..7930218863 100644 --- a/examples/icon-sprite-webgl.html +++ b/examples/icon-sprite-webgl.html @@ -21,6 +21,6 @@ cloak:
    Current sighting:
    - Filter by UFO shape: +
    diff --git a/examples/iiif.html b/examples/iiif.html index 8d8fadcad9..061c23309c 100644 --- a/examples/iiif.html +++ b/examples/iiif.html @@ -10,7 +10,7 @@ tags: "IIIF, IIIF Image API, tile source"
     
    - Enter info.json URL: +
    diff --git a/examples/measure.html b/examples/measure.html index b5a4f60a40..0cc627a964 100644 --- a/examples/measure.html +++ b/examples/measure.html @@ -16,7 +16,7 @@ tags: "draw, edit, measure, vector" ---
    - + - + diff --git a/examples/moveend.html b/examples/moveend.html index 7b14c00e35..ee2f9cee3d 100644 --- a/examples/moveend.html +++ b/examples/moveend.html @@ -11,7 +11,7 @@ docs: > tags: "moveend, map, event" ---
    - - - - + + + + diff --git a/examples/overviewmap-custom.html b/examples/overviewmap-custom.html index 8b06bd2132..4a4dba5c20 100644 --- a/examples/overviewmap-custom.html +++ b/examples/overviewmap-custom.html @@ -11,4 +11,4 @@ cloak: ---
    -
    Rotate with view
    +
    diff --git a/examples/print-to-scale.html b/examples/print-to-scale.html index 54d88db427..00875383f3 100644 --- a/examples/print-to-scale.html +++ b/examples/print-to-scale.html @@ -18,7 +18,7 @@ resources:
    - + - + - + Image smoothing +
    + + +
    diff --git a/examples/reprojection.html b/examples/reprojection.html index 5ad6a2da47..cf83a1eebc 100644 --- a/examples/reprojection.html +++ b/examples/reprojection.html @@ -9,14 +9,14 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
    - +
    - +
    - + diff --git a/examples/select-features.html b/examples/select-features.html index c7640d8514..9fd1180239 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -10,13 +10,13 @@ tags: "select, vector" ---
    - - + +  0 selected features diff --git a/examples/shaded-relief.html b/examples/shaded-relief.html index bf4be78789..4872f10e15 100644 --- a/examples/shaded-relief.html +++ b/examples/shaded-relief.html @@ -28,17 +28,17 @@ tags: "raster, shaded relief"
    hue ° 
    chroma %
    lightness %
    - + - + - + diff --git a/examples/snap.html b/examples/snap.html index 409f09491d..3827370d60 100644 --- a/examples/snap.html +++ b/examples/snap.html @@ -24,7 +24,7 @@ tags: "draw, edit, modify, vector, snap"
    - + diff --git a/examples/vector-esri-edit.html b/examples/vector-esri-edit.html index ac9ac5cad7..8856e8895b 100644 --- a/examples/vector-esri-edit.html +++ b/examples/vector-esri-edit.html @@ -10,7 +10,7 @@ resources: ---
    - +

    Points

    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -127,7 +127,7 @@ tags: "geojson, vector, openstreetmap, label"

    Lines

    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -239,7 +239,7 @@ tags: "geojson, vector, openstreetmap, label"

    Polygons

    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    diff --git a/examples/vector-tile-selection.html b/examples/vector-tile-selection.html index ba352f8c6d..4d5689c8a0 100644 --- a/examples/vector-tile-selection.html +++ b/examples/vector-tile-selection.html @@ -15,7 +15,7 @@ tags: "vector tiles, selection" ---
    - +
    vertical exaggeration: x
    sun elevation: °
    sun azimuth: °