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

Add units for, remove unnecessary html

Browse Source
This commit is contained in:
Maximilian Krög
2021-03-04 20:29:38 +01:00
parent 1c4f525ca9
commit e6b1d38cc3
4 changed files with 21 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/cluster.css
View File

@@ -1,15 +0,0 @@
.info {
min-width: 3em;
text-align: right;
}
form {
display: table;
}
form > div {
display: table-row;
}
form > div > * {
display: table-cell;
white-space: nowrap;
padding-right: 5px;
}

28
examples/cluster.html
View File

@@ -8,22 +8,18 @@ tags: "cluster, vector"
---
<div id="map" class="map"></div>
<form>
<div>
<label for="distance" cellspan>Cluster distance: </label>
<span id="distance-info" class="info"></span>
<span>px</span>
<input id="distance" type="range" min="0" max="200" step="1" value="40"/>
<div class="form-group">
<label for="distance" class="col-form-label">Cluster distance</label>
<input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
<small class="form-text text-muted">
The distance within which features will be clustered together.
</small>
</div>
<div>
<label for="min-distance">Min distance:</label>
<span id="min-distance-info" class="info"></span>
<span>px</span>
<input id="min-distance" type="range" min="0" max="200" step="1" value="20"/>
</div>
<div>
<span>Clusters:</span>
<span id ="num-clusters" class="info"></span>
<span></span>
<span></span>
<div class="form-group">
<label for="min-distance" class="col-form-label">Minimum distance</label>
<input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
<small class="form-text text-muted">
The minimum distance between clusters. Can't be larger than the configured distance.
</small>
</div>
</form>

10
examples/cluster.js
View File

@@ -14,10 +14,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {boundingExtent} from '../src/ol/extent.js';
const distanceInput = document.getElementById('distance');
const distanceNode = document.getElementById('distance-info');
const minDistanceInput = document.getElementById('min-distance');
const minDistanceNode = document.getElementById('min-distance-info');
const numClustersNode = document.getElementById('num-clusters');
const count = 20000;
const features = new Array(count);
@@ -36,11 +33,6 @@ const clusterSource = new Cluster({
minDistance: parseInt(minDistanceInput.value, 10),
source: source,
});
clusterSource.on('change', function (evt) {
numClustersNode.innerText = evt.target.features.length;
});
distanceNode.innerText = clusterSource.getDistance();
minDistanceNode.innerText = clusterSource.getMinDistance();
const styleCache = {};
const clusters = new VectorLayer({
@@ -86,12 +78,10 @@ const map = new Map({
});
distanceInput.addEventListener('input', function () {
distanceNode.innerText = distanceInput.value;
clusterSource.setDistance(parseInt(distanceInput.value, 10));
});
minDistanceInput.addEventListener('input', function () {
minDistanceNode.innerText = minDistanceInput.value;
clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
});