Split file/service layers + Fix file layers ordering

Close #229
Related to #189

resources/javascript/Sidebar.ts

@@ -2,11 +2,13 @@
 
 import "sidebar-v2/css/ol3-sidebar.css";
 
+import SidebarControl from "sidebar-v2/js/ol5-sidebar";
+
 import File from "./layers/File";
 import WMS from "./layers/WMS";
 import WMTS from "./layers/WMTS";
 
-import SidebarControl from "sidebar-v2/js/ol5-sidebar";
+import { layerGroupFiles } from "./map/layerGroup";
 
 export class Sidebar {
   sidebar: SidebarControl;
@@ -26,18 +28,36 @@ export class Sidebar {
     this.sidebar.close();
   }
 
-  addLayer(layer: File | WMS | WMTS, index?: number): HTMLLIElement {
+  addLayer(
+    type: "csv" | "geojson" | "gpx" | "kml" | "wms" | "wmts",
+    layer: File | WMS | WMTS,
+    index?: number
+  ): HTMLLIElement {
     const li = layer.sidebarElement;
 
+    let element = null;
+    if (["wms", "wmts"].indexOf(type) > -1) {
+      element = document.getElementById(
+        "layers-list-services"
+      ) as HTMLUListElement;
+    } else if (["csv", "geojson", "gpx", "kml"].indexOf(type) > -1) {
+      element = document.getElementById(
+        "layers-list-files"
+      ) as HTMLUListElement;
+    } else {
+      throw new Error(`Invalid layer type "${type}".`);
+    }
+
     if (
       typeof index === "undefined" ||
-      document.getElementById("layers-list").children.length === 0
+      element.children.length === 0 ||
+      index === layerGroupFiles.getLayers().getLength() - 1
     ) {
-      document.getElementById("layers-list").append(li);
+      element.prepend(li);
     } else if (index === 0) {
-      document.getElementById("layers-list").prepend(li);
+      element.append(li);
     } else {
-      document.getElementById("layers-list").children[index - 1].after(li);
+      element.children[element.children.length - index].before(li);
     }
 
     return li;

resources/javascript/layers/File.ts

@@ -16,7 +16,7 @@ import KMLAddFileToMap from "./files/kml";
 import layerStyleFunction from "../map/style";
 
 import { baseUrl, customKey, files, map, projections, sidebar } from "../main";
-import { layerGroup } from "../map/layerGroup";
+import { layerGroupFiles } from "../map/layerGroup";
 
 export const FILE_ZINDEX = 200;
 /**
@@ -44,11 +44,11 @@ export class File {
   /** File title. */
   title?: string | null;
   /** File type (csv|geojson|gpx|kml). */
-  type: string;
+  type: "csv" | "geojson" | "gpx" | "kml";
   url: string;
 
   constructor(
-    type: string,
+    type: "csv" | "geojson" | "gpx" | "kml",
     identifier: string,
     name: string,
     options: {
@@ -155,7 +155,7 @@ export class File {
   }
 
   addToSidebar(index?: number): void {
-    sidebar.addLayer(this, index);
+    sidebar.addLayer(this.type, this, index);
   }
 
   addToMap(projection: ProjectionLike): void {
@@ -183,12 +183,12 @@ export class File {
         zIndex: FILE_ZINDEX,
       });
 
-      layerGroup.getLayers().push(this.olLayer);
+      layerGroupFiles.getLayers().push(this.olLayer);
     }
   }
 
   removeLayer(): void {
-    layerGroup.getLayers().remove(this.olLayer);
+    layerGroupFiles.getLayers().remove(this.olLayer);
 
     this.olLayer = null;
     this.selection = [];

resources/javascript/layers/WMS.ts

@@ -15,7 +15,7 @@ import { create as sidebarElement } from "./wms/imports/sidebar";
 import { createUlService } from "../info/list/service";
 
 import { map, services, sidebar } from "../main";
-import { layerGroup } from "../map/layerGroup";
+import { layerGroupServices } from "../map/layerGroup";
 
 /**
  *
@@ -171,8 +171,8 @@ class WMS {
     WMSAddLayersToMap(this, names);
   }
 
-  addToSidebar(index?: number): void {
-    sidebar.addLayer(this, index);
+  addToSidebar(): void {
+    sidebar.addLayer("wms", this);
   }
 
   /**
@@ -191,7 +191,7 @@ class WMS {
           LAYERS: layers,
         });
       } else {
-        layerGroup.getLayers().remove(this.olLayer);
+        layerGroupServices.getLayers().remove(this.olLayer);
         this.olLayer = null;
       }
     }

resources/javascript/layers/WMTS.ts

@@ -15,7 +15,7 @@ import { create as sidebarElement } from "./wmts/imports/sidebar";
 import { createUlService } from "../info/list/service";
 
 import { services, sidebar } from "../main";
-import { layerGroup } from "../map/layerGroup";
+import { layerGroupServices } from "../map/layerGroup";
 
 /**
  *
@@ -163,8 +163,8 @@ class WMTS {
     WMTSAddLayersToMap(this, names);
   }
 
-  addToSidebar(index?: number): void {
-    sidebar.addLayer(this, index);
+  addToSidebar(): void {
+    sidebar.addLayer("wmts", this);
   }
 
   /**
@@ -183,7 +183,7 @@ class WMTS {
     }
 
     if (this.olLayers.getLayers().getLength() === 0) {
-      layerGroup.getLayers().remove(this.olLayers);
+      layerGroupServices.getLayers().remove(this.olLayers);
     }
   }
 }

resources/javascript/layers/files/csv.ts

@@ -13,7 +13,7 @@ import File from "../../File";
 import layerStyleFunction from "../../map/style";
 
 import { map } from "../../main";
-import { layerGroup } from "../../map/layerGroup";
+import { layerGroupFiles } from "../../map/layerGroup";
 import { FILE_ZINDEX } from "../File";
 
 export default function (file: File, projection: ProjectionLike): void {
@@ -87,7 +87,7 @@ export default function (file: File, projection: ProjectionLike): void {
         file.olLayer.getSource().addFeature(feature);
       });
 
-      layerGroup.getLayers().push(file.olLayer);
+      layerGroupFiles.getLayers().push(file.olLayer);
     },
   });
 }

resources/javascript/layers/wms/imports/map.ts

@@ -6,7 +6,7 @@ import TileWMS from "ol/source/TileWMS";
 import WMS from "../../WMS";
 import { update as updateSidebarElement } from "./sidebar";
 
-import { layerGroup } from "../../../map/layerGroup";
+import { layerGroupServices } from "../../../map/layerGroup";
 
 export default function (service: WMS, names: string[]): void {
   if (names.length > 0) {
@@ -27,7 +27,7 @@ export default function (service: WMS, names: string[]): void {
       );
       updateSidebarElement(service, layers);
 
-      layerGroup.getLayers().push(service.olLayer);
+      layerGroupServices.getLayers().push(service.olLayer);
     } else {
       const source = service.olLayer.getSource() as TileWMS;
       const params = source.getParams();

resources/javascript/layers/wmts/imports/map.ts

@@ -6,7 +6,7 @@ import WMTSSource, { optionsFromCapabilities } from "ol/source/WMTS";
 import WMTS from "../../WMTS";
 import { update as updateSidebarElement } from "./sidebar";
 
-import { layerGroup } from "../../../map/layerGroup";
+import { layerGroupServices } from "../../../map/layerGroup";
 
 export default function (service: WMTS, names: string[]): void {
   if (names.length > 0) {
@@ -34,13 +34,13 @@ export default function (service: WMTS, names: string[]): void {
     updateSidebarElement(service, layers);
   }
 
-  const intersect = layerGroup
+  const intersect = layerGroupServices
     .getLayersArray()
     .filter((layer: TileLayer) =>
       service.olLayers.getLayersArray().includes(layer)
     );
 
   if (intersect.length === 0) {
-    layerGroup.getLayers().push(service.olLayers);
+    layerGroupServices.getLayers().push(service.olLayers);
   }
 }

resources/javascript/map/index.ts

@@ -26,7 +26,7 @@ import BaseLayerOptions from "../_interface/BaseLayerOptions";
 
 import { cache } from "../main";
 import { markerLayer } from "./marker";
-import { layerGroup } from "./layerGroup";
+import { layerGroupFiles, layerGroupServices } from "./layerGroup";
 
 export default function (
   lnglat: Coordinate,
@@ -77,7 +77,8 @@ export default function (
   const baselayer = cache.baselayer || Object.keys(_baselayers)[0];
   baselayers[baselayer].highlight().addToMap();
 
-  map.addLayer(layerGroup);
+  map.addLayer(layerGroupFiles);
+  map.addLayer(layerGroupServices);
 
   map.once("rendercomplete", () => {
     map.on("singleclick", (event) => singleClick(event));

resources/javascript/map/layerGroup.ts

@@ -1,7 +1,8 @@
 "use strict";
 
-import LayerGroup from "ol/layer/Group";
+import { CollectionEvent } from "ol/Collection";
 import BaseLayer from "ol/layer/Base";
+import LayerGroup from "ol/layer/Group";
 
 import File from "../layers/File";
 import WMS from "../layers/WMS";
@@ -45,20 +46,27 @@ function find(olLayer: BaseLayer): File | WMS | WMTS {
   return null;
 }
 
-export const layerGroup: LayerGroup = new LayerGroup();
-
-layerGroup.getLayers().on("add", (event) => {
+function addLayer(event: CollectionEvent<BaseLayer>): void {
   const { index } = event;
   const layer = find(event.element);
 
   if (layer !== null) {
     layer.addToSidebar(index);
   }
-});
-layerGroup.getLayers().on("remove", (event) => {
+}
+
+function removeLayer(event: CollectionEvent<BaseLayer>): void {
   const layer = find(event.element);
 
   if (layer !== null) {
     layer.sidebarElement.remove();
   }
-});
+}
+
+export const layerGroupFiles: LayerGroup = new LayerGroup();
+export const layerGroupServices: LayerGroup = new LayerGroup();
+
+layerGroupFiles.getLayers().on("add", (event) => addLayer(event));
+layerGroupFiles.getLayers().on("remove", (event) => removeLayer(event));
+layerGroupServices.getLayers().on("add", (event) => addLayer(event));
+layerGroupServices.getLayers().on("remove", (event) => removeLayer(event));

resources/javascript/sidebar/layers.ts

@@ -14,7 +14,7 @@ import WMS from "../layers/WMS";
 import WMTS from "../layers/WMTS";
 
 export default function (
-  type: string,
+  type: "csv" | "geojson" | "gpx" | "kml" | "wms" | "wmts",
   layer: File | WMS | WMTS,
   name: string,
   title: string,
@@ -86,7 +86,11 @@ export default function (
     li.append(divLegend);
   }
 
-  document.getElementById("layers-list").append(li);
+  if (["wms", "wmts"].indexOf(type) > -1) {
+    document.getElementById("layers-list-services").append(li);
+  } else if (["csv", "geojson", "gpx", "kml"].indexOf(type) > -1) {
+    document.getElementById("layers-list-files").append(li);
+  }
 
   return li;
 }

resources/javascript/sidebar/layers/components/btn-order.ts

@@ -1,27 +1,27 @@
 "use strict";
 
 import File from "../../../layers/File";
-import WMS from "../../../layers/WMS";
-import WMTS from "../../../layers/WMTS";
+// import WMS from "../../../layers/WMS";
+// import WMTS from "../../../layers/WMTS";
 
-import { layerGroup } from "../../../map/layerGroup";
+import { layerGroupFiles } from "../../../map/layerGroup";
 
 export default function (
   type: string,
-  layer: File | WMS | WMTS
+  layer: File /* | WMS | WMTS */
 ): HTMLAnchorElement[] {
   const aOrderUp = document.createElement("a");
   aOrderUp.href = "#";
   aOrderUp.innerHTML = '<i class="fas fa-caret-up"></i>';
   aOrderUp.addEventListener("click", (event: Event) => {
     event.preventDefault();
 
-    const layers = layerGroup.getLayers();
+    const layers = layerGroupFiles.getLayers();
     const index = layers.getArray().findIndex((l) => l === layer.olLayer);
 
-    if (index > 0) {
+    if (index < layers.getLength() - 1) {
       layers.remove(layer.olLayer);
-      layers.insertAt(index - 1, layer.olLayer);
+      layers.insertAt(index + 1, layer.olLayer);
     }
   });
 
@@ -31,12 +31,12 @@ export default function (
   aOrderDown.addEventListener("click", (event: Event) => {
     event.preventDefault();
 
-    const layers = layerGroup.getLayers();
+    const layers = layerGroupFiles.getLayers();
     const index = layers.getArray().findIndex((l) => l === layer.olLayer);
 
-    if (index < layers.getLength() - 1) {
+    if (index > 0) {
       layers.remove(layer.olLayer);
-      layers.insertAt(index + 1, layer.olLayer);
+      layers.insertAt(index - 1, layer.olLayer);
     }
   });
 

templates/app/partial/sidebar/layers.html.twig

@@ -10,6 +10,7 @@
             <i class="fas fa-plus-circle"></i>
             Add a layer
         </button>
-        <ul id="layers-list" class="list-unstyled mt-3"></ul>
+        <ul id="layers-list-files" class="list-unstyled mt-3"></ul>
+        <ul id="layers-list-services" class="list-unstyled mt-1"></ul>
     </div>
 </div>