ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update some example styles / formatting

Browse Source
This commit is contained in:
Maximilian Krög
2020-08-01 11:47:26 +02:00
parent 82328fe2c1
commit 37e5529b22
14 changed files with 97 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/color-manipulation.css
View File

@@ -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;
}

6
examples/color-manipulation.html
View File

@@ -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>

9
examples/hit-tolerance.html
View File

@@ -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>

4
examples/hit-tolerance.js
View File

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

3
examples/layer-group.css
View File

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

37
examples/layer-group.html
View File

@@ -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>

20
examples/layer-group.js
View File

@@ -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 () {

14
examples/moveend.html
View File

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

8
examples/region-growing.css
View File

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

15
examples/region-growing.html
View File

@@ -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>

5
examples/shaded-relief.css
View File

@@ -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;
}

9
examples/shaded-relief.html
View File

@@ -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>

38
examples/vector-labels.css
View File

@@ -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;
}

13
examples/vector-labels.html
View File

@@ -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>