Skip to content

Commit 80d9954

Browse files
sjhoeksmasjhoeksma
committed
fix: Sorting
1 parent 4f66df2 commit 80d9954

File tree

5 files changed

+108
-28
lines changed

5 files changed

+108
-28
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,5 @@
2626
- Add location point on home, not just a bounce circle
2727
- Implement timeline function and layer types
2828
- Implement splitscreen in layers
29-
- Add the options to load a config based on parameters
29+
- Add the options to load a config based on parameters
30+
- Hide history layers from layer menu, and group the in on layergroup

‎src/GEOComp.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -549,8 +549,8 @@ GEOComp = withMethodExposing(GEOComp, [
549549
}
550550
}
551551
}
552-
//Load by the new values dispatching them,
553-
//first merging the current values with the new values
552+
//Load the new values by dispatching them,
553+
//First merging the current values with the new values
554554
comp.dispatch(changeValueAction(deepMerge(comp.toJsonValue(), data), true))
555555
return true
556556
} catch (e) {

‎src/i18n/comps/locales/enObj.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@ export const enObj: I18nObjects = {
309309
visible: true,
310310
opacity: 1,
311311
selectable: false,
312+
groups: ['default', 'splitscreen'],
312313
source: {
313314
url: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
314315
projection: "EPSG:3857",
@@ -321,6 +322,7 @@ export const enObj: I18nObjects = {
321322
minZoom: 0,
322323
maxZoom: 19,
323324
visible: true,
325+
groups: ['default', 'splitscreen'],
324326
source: {
325327
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
326328
},

‎src/vendors/Geo.jsx‎

Lines changed: 66 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { RingLoader } from 'react-spinners'
1111

1212
//The real GEO OpenLayers packages
1313
import { Map, View } from 'ol/index';
14-
import { Vector as VectorLayer } from 'ol/layer';
14+
import { Vector as VectorLayer, Group as LayerGroup } from 'ol/layer';
1515
import { Vector as VectorSource } from 'ol/source';
1616
import { LineString, Polygon } from 'ol/geom';
1717
import { fromLonLat, transformExtent } from 'ol/proj';
@@ -37,6 +37,8 @@ import RotateNorthControl from './RotateNorthControl'
3737
import { createLayer } from './helpers/Layers'
3838
import { animate, geoJsonStyleFunction, useScreenSize } from './helpers'
3939

40+
const defMinDate = '1900'
41+
4042
function Geo(props) {
4143
const [geoRef, setGeoRef] = useState();
4244
const [geoLoc, setGeoLoc] = useState([0, 0]);
@@ -109,15 +111,54 @@ function Geo(props) {
109111

110112
const loadLayers = function (map) {
111113
if (map) {
112-
// Validate and create new layers
113-
const layers = Array.isArray(props.layers) ? props.layers : [];
114-
const validatedLayers = layers.filter(layer => layer !== null && layer !== undefined);
115-
const sortedLayers = validatedLayers
116-
.sort((a, b) => (a.order || 0) - (b.order || 0))
117-
.map(layerConfig => createLayer(layerConfig, map))
118-
.filter(layer => layer !== null && layer !== undefined);
114+
//Remove the current layers
119115
map.getLayers().clear();
120-
sortedLayers.forEach(layer => { if (layer) map.addLayer(layer) });
116+
const layers = (Array.isArray(props.layers) ? props.layers : [])
117+
.map(layerConfig => createLayer(layerConfig, map))
118+
.filter(layer => layer !== null && layer !== undefined)
119+
const workinglayers = [...layers]
120+
//Sort all layers an groups and add them to map
121+
const layerGroups = {}
122+
layers.forEach((layer, idx) => {
123+
if (layer) {
124+
if (layer.get('groups')) {
125+
const groups = layer.get('groups')
126+
const gr = Array.isArray(groups) ? groups : [groups]
127+
gr.forEach((g) => {
128+
switch (g) {
129+
case 'history':
130+
layer.setVisible(false) //History is always invisable
131+
break;
132+
case 'default':
133+
return //Skip adding to group
134+
}
135+
layerGroups[g] = layerGroups[g] ? [...layerGroups[g], layer] : [layer]
136+
})
137+
}
138+
}
139+
});
140+
//Convert layerGroups into LayerGroups
141+
for (const [key, value] of Object.entries(layerGroups)) {
142+
workinglayers.push(new LayerGroup({
143+
name: key,
144+
layers: value,
145+
order: Math.min(...value.map(item => { return item.get('order') || 999999 })) - 1
146+
}))
147+
}
148+
//Sort the working layer
149+
workinglayers.sort((a, b) => {
150+
const av = (a.get('order') || 0)
151+
const bv = (b.get('order') || 0)
152+
if (av < bv) {
153+
return -1;
154+
} else if (av > bv) {
155+
return 1;
156+
}
157+
return 0;
158+
});
159+
workinglayers.forEach(layer => {
160+
map.addLayer(layer)
161+
})
121162

122163
//TrackerVector
123164
if (featureEnabled('tracker')) {
@@ -424,30 +465,29 @@ function Geo(props) {
424465
if (featureEnabled('menu')) olMap.addControl(toggle);
425466

426467
if (featureEnabled('timeline')) {
427-
var histo = [
428-
/* no more ?
429-
new ol.layer.Geoportail({
430-
name: '1970',
431-
title: '1965-1980',
432-
key: 'orthohisto',
433-
layer: 'ORTHOIMAGERY.ORTHOPHOTOS.1965-1980'
434-
}),
435-
*/
436-
]
468+
//From layers get all histroy
469+
var histo = []
470+
props.layers.forEach((layer) => {
471+
if (layer.type && layer.date && (
472+
(Array.isArray(layer.group) && layer.group.includes('history')) ||
473+
(typeof layer.type === "string" && layer.type == 'history'))) {
474+
histo.push[layer]
475+
}
476+
})
437477
//Timeline
438478
var tline = new Timeline({
439479
className: 'ol-pointer ol-zoomhover ol-timeline',
440480
features: histo,
441-
minDate: new Date('1923'),
442-
maxDate: new Date(),
443-
getFeatureDate: function (l) { return l.get('name'); },
444-
getHTML: function (l) { return l.get('name'); }
481+
minDate: new Date(props.minDate || defMinDate),
482+
maxDate: new Date(props.maxDate),
483+
getFeatureDate: function (l) { return l.get('date'); },
484+
getHTML: function (l) { return l.get('date'); }
445485
});
446486

447487
tline.on('scroll', function (e) {
448488
var layer, dmin = Infinity;
449489
histo.forEach(function (l, i) {
450-
var d = new Date(l.get('name'));
490+
var d = new Date(l.get('date'));
451491
var dt = Math.abs(e.date - d);
452492
if (dt < dmin) {
453493
layer = l;
@@ -457,11 +497,12 @@ function Geo(props) {
457497
});
458498
if (layer) {
459499
layer.setVisible(true);
460-
$('.date').text(layer.get('title') || layer.get('name'));
461500
}
501+
fireEvent("timeline:scroll", e)
462502
});
463503
tline.on('select', function (e) {
464504
tline.setDate(e.feature);
505+
fireEvent("timeline:select", e)
465506
});
466507

467508

‎src/vendors/helpers/Layers.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ export function createLayer(layerConfig, map) {
3232
visible: layerConfig.visible,
3333
opacity: layerConfig.opacity,
3434
selectable: layerConfig.selectable,
35+
groups: layerConfig.groups,
36+
extra: layerConfig.extra,
37+
order: layerConfig.order,
3538
source: new VectorTileSource({
3639
attributions: layerConfig.attributions,
3740
format: new MVT(),
@@ -46,6 +49,9 @@ export function createLayer(layerConfig, map) {
4649
visible: layerConfig.visible,
4750
opacity: layerConfig.opacity,
4851
selectable: layerConfig.selectable,
52+
groups: layerConfig.groups,
53+
extra: layerConfig.extra,
54+
order: layerConfig.order,
4955
source: new TileWMS({
5056
url: layerConfig.source.url,
5157
params: layerConfig.source.params,
@@ -61,6 +67,9 @@ export function createLayer(layerConfig, map) {
6167
visible: layerConfig.visible,
6268
opacity: layerConfig.opacity,
6369
selectable: layerConfig.selectable,
70+
groups: layerConfig.groups,
71+
extra: layerConfig.extra,
72+
order: layerConfig.order,
6473
source: new VectorSource({
6574
format: new GeoJSON(),
6675
url: layerConfig.source.url,
@@ -74,6 +83,9 @@ export function createLayer(layerConfig, map) {
7483
visible: layerConfig.visible,
7584
opacity: layerConfig.opacity,
7685
selectable: layerConfig.selectable,
86+
groups: layerConfig.groups,
87+
extra: layerConfig.extra,
88+
order: layerConfig.order,
7789
source: new XYZ({
7890
url: layerConfig.source.url,
7991
}),
@@ -86,6 +98,9 @@ export function createLayer(layerConfig, map) {
8698
visible: layerConfig.visible,
8799
opacity: layerConfig.opacity,
88100
selectable: layerConfig.selectable,
101+
groups: layerConfig.groups,
102+
extra: layerConfig.extra,
103+
order: layerConfig.order,
89104
source: new VectorSource({
90105
features: new GeoJSON().readFeatures(layerConfig.source.data, {
91106
// Ensure the features are read with the correct projection
@@ -105,6 +120,9 @@ export function createLayer(layerConfig, map) {
105120
visible: layerConfig.visible,
106121
opacity: layerConfig.opacity,
107122
selectable: layerConfig.selectable,
123+
groups: layerConfig.groups,
124+
extra: layerConfig.extra,
125+
order: layerConfig.order,
108126
source: new GeoTIFF({
109127
sources: [
110128
{
@@ -131,6 +149,9 @@ export function createLayer(layerConfig, map) {
131149
visible: layerConfig.visible,
132150
opacity: layerConfig.opacity,
133151
selectable: layerConfig.selectable,
152+
groups: layerConfig.groups,
153+
extra: layerConfig.extra,
154+
order: layerConfig.order,
134155
source: new VectorTileSource({
135156
projection: layerConfig.source?.projection || 'EPSG:3857',
136157
}),
@@ -148,6 +169,9 @@ export function createLayer(layerConfig, map) {
148169
visible: layerConfig.visible,
149170
opacity: layerConfig.opacity,
150171
selectable: layerConfig.selectable,
172+
groups: layerConfig.groups,
173+
extra: layerConfig.extra,
174+
order: layerConfig.order,
151175
source: new TileArcGISRest({
152176
url: layerConfig.source?.url,
153177
params: layerConfig.source.params || {},
@@ -162,6 +186,9 @@ export function createLayer(layerConfig, map) {
162186
visible: layerConfig.visible,
163187
opacity: layerConfig.opacity,
164188
selectable: layerConfig.selectable,
189+
groups: layerConfig.groups,
190+
extra: layerConfig.extra,
191+
order: layerConfig.order,
165192
source: new ImageArcGISRest({
166193
url: layerConfig.source?.url,
167194
ratio: layerConfig.source.ratio || 1,
@@ -170,6 +197,15 @@ export function createLayer(layerConfig, map) {
170197
}),
171198
});
172199

200+
/* History ?
201+
new ol.layer.Geoportail({
202+
name: '1970',
203+
title: '1965-1980',
204+
key: 'orthohisto',
205+
layer: 'ORTHOIMAGERY.ORTHOPHOTOS.1965-1980'
206+
}),
207+
*/
208+
173209
default:
174210
//Error will cause issue within lowcoder. So just use log
175211
console.error(`Unsupported layer type: ${layerConfig.type}`);

0 commit comments

Comments
 (0)