Skip to content

Commit

Permalink
Add label management
Browse files Browse the repository at this point in the history 
Close #146
  • Loading branch information
@jbelien
jbelien committed Apr 21, 2020
1 parent 5d2cfea commit 7c6f4f9
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 29 deletions.
11 changes: 9 additions & 2 deletions resources/javascript/file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class File {
* @param {String} title File title.
* @param {String} description File description.
* @param {bool} local Is the file stored initially on the server.
* @param {String} label Column used for labeling.
*/
constructor (type, identifier, name, title, description, local) {
this.type = type;
Expand All @@ -35,6 +36,7 @@ class File {
this.selection = [];
this.local = local || false;
this.content = null;
this.label = null;

if (['csv', 'geojson', 'gpx', 'kml'].indexOf(this.type) === -1) {
throw new Error('Invalid file type.');
Expand Down Expand Up @@ -101,7 +103,6 @@ class File {
}

if (typeof element !== 'undefined') {
console.log(element, element.parentElement);
element.parentElement.replaceChild(li, element);
} else {
document.querySelector(`#modal-layers-files-${this.type} > .list-group`).append(li);
Expand Down Expand Up @@ -167,7 +168,7 @@ class File {
if (source !== null) {
this.olLayer = new VectorLayer({
source: source,
style: (feature, resolution) => layerStyleFunction(feature, resolution)
style: (feature, resolution) => layerStyleFunction(feature, this.label, resolution)
});

window.app.map.addLayer(this.olLayer);
Expand All @@ -192,6 +193,12 @@ class File {
window.app.sidebar.close();
}

getColumns () {
const features = this.olLayer.getSource().getFeatures();

return features.length > 0 ? Object.keys(features[0].getProperties()) : [];
}

getFeatureInfo (coordinates) {
const pixel = window.app.map.getPixelFromCoordinate(coordinates);

Expand Down
2 changes: 1 addition & 1 deletion resources/javascript/layers/files/csv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function (file, projection) {

file.olLayer = new VectorLayer({
source: new VectorSource(),
style: (feature, resolution) => layerStyleFunction(feature, resolution)
style: (feature, resolution) => layerStyleFunction(feature, file.label, resolution)
});

results.data.forEach(result => {
Expand Down
53 changes: 53 additions & 0 deletions resources/javascript/map/layers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import WMSApplySelection from '../layers/wms/apply';
import initWMTS from '../layers/wmts/init';
import WMTSApplySelection from '../layers/wmts/apply';

let layerSettings = null;

export default function () {
initFile('csv');
initFile('geojson');
Expand Down Expand Up @@ -127,6 +129,57 @@ export default function () {
}
});

$(document).on('click', '.btn-layer-settings', (event) => {
event.preventDefault();

const { type, index, layer } = $(event.target).closest('li').data();

switch (type) {
case 'csv':
layerSettings = window.app.csv[index];
break;
case 'geojson':
layerSettings = window.app.geojson[index];
break;
case 'gpx':
layerSettings = window.app.gpx[index];
break;
case 'kml':
layerSettings = window.app.kml[index];
break;
}

const columns = layerSettings.getColumns();

document.querySelector('#modal-settings .modal-body > strong').innerText = layer;

document.getElementById('layer-label').innerHTML = '<option value=""></option>';
columns.filter(c => c !== 'geometry').forEach((column) => {
const option = document.createElement('option');
option.value = column;
option.innerText = column;
option.selected = (column === layerSettings.label);

document.getElementById('layer-label').append(option);
});

$('#modal-settings').modal('show');
});

document.querySelector('#modal-settings form').addEventListener('submit', (event) => {
event.preventDefault();

let label = document.getElementById('layer-label').value;
if (label.length === 0) { label = null; }

layerSettings.label = label;
layerSettings.olLayer.changed();

layerSettings = null;

$('#modal-settings').modal('hide');
});

$(document).on('click', '.btn-layer-legend', (event) => {
event.preventDefault();

Expand Down
28 changes: 10 additions & 18 deletions resources/javascript/map/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from 'ol/style';
import Text from 'ol/style/Text';

export default function style (feature, resolution) {
export default function style (feature, labelColumn, resolution) {
const { color } = feature.getProperties();

const fill = new Fill({
Expand All @@ -33,53 +33,45 @@ export default function style (feature, resolution) {
}),
fill: fill,
stroke: stroke,
text: text(feature)
text: text(feature, labelColumn)
})
];
}

function getLabel (feature) {
const { label } = feature.getProperties();

if (typeof label !== 'undefined') {
return label;
}

return null;
}

function text (feature) {
function text (feature, labelColumn) {
const type = feature.getGeometry().getType();
const label = getLabel(feature);
const properties = feature.getProperties();

const label = labelColumn !== null && typeof properties[labelColumn] !== 'undefined' ? properties[labelColumn] : null;

if (label !== null) {
const textOptions = {
stroke: new Stroke({
color: '#fff',
width: 2
}),
text: label
text: label.toString()
};

switch (type) {
case 'Point':
case 'MultiPoint':
$.extend(textOptions, {
Object.assign(textOptions, {
offsetY: 12
});
break;

case 'LineString':
case 'MultiLineString':
$.extend(textOptions, {
Object.assign(textOptions, {
overflow: true,
placement: 'line'
});
break;

case 'Polygon':
case 'MultiPolygon':
$.extend(textOptions, {
Object.assign(textOptions, {
overflow: true
});
break;
Expand Down
3 changes: 2 additions & 1 deletion templates/app/home.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,6 @@
</div>

{{ include("@app/partial/modal/layers.html.twig") }}
{{ include("@app/partial/modal/settings.html.twig") }}

{% endblock %}
{% endblock %}
30 changes: 30 additions & 0 deletions templates/app/partial/modal/settings.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<div class="modal" id="modal-settings" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="fas fa-tools"></i>
Layer settings
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form autocomplete="off">
<div class="modal-body">
<strong></strong>
<hr>
<div class="form-group">
<label for="layer-label">Label</label>
<select class="form-control" id="layer-label">
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="btn-settings-apply">Apply</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
21 changes: 14 additions & 7 deletions templates/app/partial/sidebar/layers.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
</h1>

<div class="mt-3">
<button type="button" class="btn btn-outline-primary btn-sm btn-block" data-toggle="modal" data-target="#modal-layers">
<button type="button" class="btn btn-outline-primary btn-sm btn-block" data-toggle="modal"
data-target="#modal-layers">
<i class="fas fa-plus-circle"></i>
Add a layer
</button>
Expand All @@ -14,19 +15,25 @@
<div class="d-flex w-100 justify-content-between">
<div class="layer-name"></div>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-secondary btn-layer-remove" title="Remove">
<i class="far fa-trash-alt fa-fw"></i>
<button type="button" class="btn btn-outline-secondary btn-layer-zoom disabled" title="Zoom"
disabled>
<i class="fas fa-search-location"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-layer-legend disabled" title="Legend" disabled>
<button type="button" class="btn btn-outline-secondary btn-layer-legend disabled" title="Legend"
disabled>
<i class="far fa-image"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-layer-zoom disabled" title="Zoom" disabled>
<i class="fas fa-search-location"></i>
<button type="button" class="btn btn-outline-secondary btn-layer-settings disabled"
title="Settings" disabled>
<i class="fas fa-tools"></i>
</button>
<button type="button" class="btn btn-outline-secondary btn-layer-remove" title="Remove">
<i class="far fa-trash-alt fa-fw"></i>
</button>
</div>
</div>
<div class="layer-legend" style="display: none !important;"></div>
</li>
</ul>
</div>
</div>
</div>

0 comments on commit 7c6f4f9

Please sign in to comment.