#430 fix duplicate id console errors (#431)

dist/commonjs/zoneerder/components/ol-layerswitcher.d.ts

@@ -18,7 +18,7 @@ export declare class Layerswitcher extends ol.control.Control {
     setMap(map: any): void;
     ensureTopVisibleBaseLayerShown_(): void;
     setVisible_(lyr: any, visible: boolean): void;
-    renderLayer_(lyr: any, idx: any): HTMLLIElement;
+    renderLayer_(lyr: any): HTMLLIElement;
     private addLegend;
     renderLayers_(lyr: any, elm: Element): void;
     forEachRecursive(lyr: any, fn: any): void;

dist/native-modules/zoneerder/components/ol-layerswitcher.d.ts

@@ -18,7 +18,7 @@ export declare class Layerswitcher extends ol.control.Control {
     setMap(map: any): void;
     ensureTopVisibleBaseLayerShown_(): void;
     setVisible_(lyr: any, visible: boolean): void;
-    renderLayer_(lyr: any, idx: any): HTMLLIElement;
+    renderLayer_(lyr: any): HTMLLIElement;
     private addLegend;
     renderLayers_(lyr: any, elm: Element): void;
     forEachRecursive(lyr: any, fn: any): void;

package.json

@@ -25,7 +25,8 @@
     "primer-tooltips": "^2.0.0",
     "proj4": "^2.4.3",
     "sass": "^1.53.0",
-    "toastr": "^2.1.4"
+    "toastr": "^2.1.4",
+    "typescript-guid": "^1.0.3"
   },
   "devDependencies": {
     "@types/jasmine": "^2.8.9",

src/zoneerder/components/ol-layerswitcher.ts

@@ -1,4 +1,5 @@
 import * as ol from 'openlayers';
+import { Guid } from 'typescript-guid';
 import { LayerType } from '../models/layerConfig.enums';
 
 export class Layerswitcher extends ol.control.Control {
@@ -158,11 +159,12 @@ export class Layerswitcher extends ol.control.Control {
    * @param {ol.layer.Base} lyr Layer to be rendered (should have a title property).
    * @param {Number} idx Position in parent group list.
    */
-  public renderLayer_(lyr: any, idx: any) {
+  public renderLayer_(lyr: any) {
     const self = this;
+    const id = Guid.create();
     const li = document.createElement('li');
     const lyrTitle = lyr.get('title');
-    const lyrId = lyr.get('title').replace(' ', '-') + '_' + idx;
+    const lyrId = lyr.get('title').replace(' ', '-') + '_' + id;
     const label = document.createElement('label');
 
     if (lyr.getLayers) {
@@ -262,12 +264,11 @@ export class Layerswitcher extends ol.control.Control {
    */
   public renderLayers_(lyr: any, elm: Element) {
     const lyrs = lyr.getLayers().getArray().slice().reverse();
-    for (let i = 0, l; i < lyrs.length; i++) {
-      l = lyrs[i];
+    lyrs.forEach((l) => {
       if (l.get('title')) {
-        elm.appendChild(this.renderLayer_(l, i));
+        elm.appendChild(this.renderLayer_(l));
       }
-    }
+    })
   }
 
   /**

yarn.lock

@@ -7739,6 +7739,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-guid@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typescript-guid/-/typescript-guid-1.0.3.tgz#d02734e409f66bc4fd3a80aee2a8c5900d6ce3e9"
+  integrity sha512-8fXm02GoRLKt5o9rIxNM6ayDb+odP2iB6/jpfYUEG2JIJCgtSwHRjCXv8sBx9Np6VasrQsyLv4Ua4xzOmdjkOw==
+
 [email protected]:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.3.tgz#e1b0a3c394190838a0b168e771b0ad56a0af0faa"