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

Display error message instead of 'style not valid yet...'

Browse Source
This commit is contained in:
Maximilian Krög
2019-10-03 16:57:20 +02:00
parent 8fe8302dc2
commit db49842f63
2 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/webgl-points-layer.html
View File

@@ -29,10 +29,8 @@ experimental: true
<option value="circles">Circles, size related to population</option> <option value="circles">Circles, size related to population</option>
</select> </select>
<textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea> <textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
<small id="style-valid" style="display: none; color: forestgreen"> <small>
✓ style is valid <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
<span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
&nbsp;
</small> </small>
<small id="style-invalid" style="display: none; color: grey">
✗ style not yet valid...
</small>
<small>&nbsp;</small>

48
examples/webgl-points-layer.js
View File

@@ -63,27 +63,26 @@ const map = new Map({
let literalStyle; let literalStyle;
let pointsLayer; let pointsLayer;
function refreshLayer(newStyle) { function refreshLayer(newStyle) {
try { const previousLayer = pointsLayer;
const previousLayer = pointsLayer; pointsLayer = new WebGLPointsLayer({
pointsLayer = new WebGLPointsLayer({ source: vectorSource,
source: vectorSource, style: newStyle
style: newStyle });
}); map.addLayer(pointsLayer);
map.addLayer(pointsLayer);
if (previousLayer) { if (previousLayer) {
map.removeLayer(previousLayer); map.removeLayer(previousLayer);
}
literalStyle = newStyle;
return true;
} catch (e) {
return false;
} }
literalStyle = newStyle;
} }
function setStyleStatus(valid) { const spanValid = document.getElementById('style-valid');
document.getElementById('style-valid').style.display = valid === true ? 'initial' : 'none'; const spanInvalid = document.getElementById('style-invalid');
document.getElementById('style-invalid').style.display = valid === false ? 'initial' : 'none'; function setStyleStatus(errorMsg) {
const isError = typeof errorMsg === 'string';
spanValid.style.display = errorMsg === null ? 'initial' : 'none';
spanInvalid.firstElementChild.innerText = isError ? errorMsg : '';
spanInvalid.style.display = isError ? 'initial' : 'none';
} }
const editor = document.getElementById('style-editor'); const editor = document.getElementById('style-editor');
@@ -91,10 +90,12 @@ editor.addEventListener('input', function() {
const textStyle = editor.value; const textStyle = editor.value;
try { try {
const newLiteralStyle = JSON.parse(textStyle); const newLiteralStyle = JSON.parse(textStyle);
const same = JSON.stringify(newLiteralStyle) === JSON.stringify(literalStyle); if (JSON.stringify(newLiteralStyle) !== JSON.stringify(literalStyle)) {
setStyleStatus(same || refreshLayer(newLiteralStyle)); refreshLayer(newLiteralStyle);
}
setStyleStatus(null);
} catch (e) { } catch (e) {
setStyleStatus(false); setStyleStatus(e.message);
} }
}); });
@@ -103,8 +104,13 @@ select.value = 'circles';
function onSelectChange() { function onSelectChange() {
const style = select.value; const style = select.value;
const newLiteralStyle = predefinedStyles[style]; const newLiteralStyle = predefinedStyles[style];
setStyleStatus(refreshLayer(newLiteralStyle) ? undefined : false);
editor.value = JSON.stringify(newLiteralStyle, null, 2); editor.value = JSON.stringify(newLiteralStyle, null, 2);
try {
refreshLayer(newLiteralStyle);
setStyleStatus();
} catch (e) {
setStyleStatus(e.message);
}
} }
onSelectChange(); onSelectChange();
select.addEventListener('change', onSelectChange); select.addEventListener('change', onSelectChange);