demo

package-lock.json

@@ -972,6 +972,21 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.12.tgz",
       "integrity": "sha512-WVA/eh3fzjx0apOzkKot4YRRUsGkHj50zFQWrAOMgivGaj1YVrvhf+m3hpglj5fn/BkLiFDl8RT0wAE8z9X+gQ=="
     },
+    "@angular/elements": {
+      "version": "10.1.5",
+      "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-10.1.5.tgz",
+      "integrity": "sha512-FcLTAAQuDV029vcFN+g18ytgxSG9BwbFbYNtgboueN80EETu0kcrbf7YiL2dgvtCyZRTlaNr0hlOMAago5z4+g==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.2.tgz",
+          "integrity": "sha512-wAH28hcEKwna96/UacuWaVspVLkg4x1aDM9JlzqaQTOFczCktkVAb5fmXChgandR1EraDPs2w8P+ozM+oafwxg=="
+        }
+      }
+    },
     "@angular/forms": {
       "version": "9.1.12",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",

package.json

@@ -36,6 +36,7 @@
     "@angular/common": "^9.1.12",
     "@angular/compiler": "^9.1.12",
     "@angular/core": "^9.1.12",
+    "@angular/elements": "^10.1.5",
     "@angular/forms": "^9.1.12",
     "@angular/google-maps": "^9.2.4",
     "@angular/material": "^9.2.4",

src/app/pages/maps/leaflet/leaflet.component.ts

@@ -2,48 +2,152 @@ import { Component, OnInit } from '@angular/core';
 
 import * as L from 'leaflet';
 import 'style-loader!leaflet/dist/leaflet.css';
+import { NgElement, WithProperties } from '@angular/elements';
+// import AMPedestrian from '../../../../assets/map/am_plusnetwork_pedestrian.json';
+// import AMPlusMainNetwork from '../../../../assets/map/am_streets.json';
+// import AMMajorStreets from '../../../../assets/map/am_major_streets.json';
+import AMTram2020 from '../../../../assets/map/am_tram_2020.json';
+import AMTram2018 from '../../../../assets/map/am_tram_2018.json';
+import AMTram2020_Stops from '../../../../assets/map/am_tramstop_2020.json';
+import AMTram2018_Stops from '../../../../assets/map/am_tramstop_2018.json';
+
 
 @Component({
   selector: 'ngx-leaflet',
   styleUrls: ['./leaflet.component.scss'],
   template: `
-    <nb-card>
-      <nb-card-header>Leaflet Maps</nb-card-header>
+  <div class="row d-flex justify-content-between align-items-center">
+    <nb-card class="col-5">
+      <nb-card-header>Tram Lines 2018</nb-card-header>
       <nb-card-body>
-        <div leaflet [leafletOptions]="options" [leafletLayers]="layers"></div>
+        <div leaflet id="map1" #map1 
+        [leafletOptions]="options" 
+        [leafletLayersControl]="layersControl1"
+        [leafletLayers]="layers"></div>
+        <div class="mt-1">
+          <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua.
+          </p>
+        </div>
       </nb-card-body>
     </nb-card>
+    <nb-card class="col-5">
+      <nb-card-header>Tram Lines 2020</nb-card-header>
+      <nb-card-body>
+        <div leaflet id="map2" #map2 
+        [leafletOptions]="options1" 
+        [leafletLayersControl]="layersControl"
+        [leafletLayers]="layers2"></div>
+        <div class="mt-1">
+          <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua.
+          </p>
+        </div>
+      </nb-card-body>
+    </nb-card>
+</div>
   `,
 })
 export class LeafletComponent {
 
+  public map1: L.Map;
+
+  public map2: L.Map;
+
+  icon = new L.Icon({
+    iconSize: [25, 41],
+    iconAnchor: [13, 41],
+    iconUrl: 'assets/img/markers/marker-icon.png',
+    iconRetinaUrl: 'assets/img/markers/marker-icon-2x.png',
+    shadowUrl: 'assets/img/markers/marker-shadow.png'
+  });
+
   options = {
     layers: [
       L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
     ],
-    zoom: 5,          
-    center: L.latLng({ lat: 45.79816953017265, lng: 7.646484374999999 }),
+    zoom: 9,
+    center: L.latLng({ lat: 52.372664783594274, lng: 4.8950958251953125 }),
   };
 
+  layersControl = {
+    overlays: {
+      'Amsterdam Tram - 2020': this.getLayer('Tram 2020',<any>AMTram2020),
+      'Amsterdam Tram Stops - 2020': this.getLayer('Stop Tram 2020',<any>AMTram2020_Stops),
+    }
+  }
+
+  layersControl1 = {
+    overlays: {
+      'Amsterdam Tram - 2018': this.getLayer('Tram 2018',<any>AMTram2018),
+      'Amsterdam Tram Stops - 2018': this.getLayer('Stop Tram 2018',<any>AMTram2018_Stops),
+    }
+  }
+
+  options1 = {
+    layers: [
+      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
+    ],
+    zoom: 9,
+    center: L.latLng({ lat: 52.372664783594274, lng: 4.8950958251953125 }),
+  };
 
-  layers = [L.geoJSON(
-			({
-        "type": "FeatureCollection",
-        "features": [
+  layer = L.marker([52.372664783594274, 4.8950958251953125], {
+    icon: L.icon({
+      iconSize: [25, 41],
+      iconAnchor: [13, 41],
+      iconUrl: 'assets/img/markers/marker-icon.png',
+      iconRetinaUrl: 'assets/img/markers/marker-icon-2x.png',
+      shadowUrl: 'assets/img/markers/marker-shadow.png'
+    })
+  }).bindPopup("Amsterdam");
+
+  layer2 = L.marker([52.372664783594274, 4.8950958251953125], {
+    icon: L.icon({
+      iconSize: [25, 41],
+      iconAnchor: [13, 41],
+      iconUrl: 'assets/img/markers/marker-icon.png',
+      iconRetinaUrl: 'assets/img/markers/marker-icon-2x.png',
+      shadowUrl: 'assets/img/markers/marker-shadow.png'
+    })
+  }).bindPopup("Amsterdam");
+
+
+
+  layers = [this.layer];
+
+  layers2 = [this.layer2];
+
+
+  public getLayer(title,l) {
+  
+      let layer = L.geoJSON(l,
         {
-            "type": "Feature",
-            "properties": {},
-            "geometry": {
-              "type": "Point",
-              "coordinates": [
-                12.480468749999998,
-                41.918628865183045
-              ]
-            }
-          }
-        ]
-      }) as any,
-			{ style: () => ({ color: '#ff7800' })})
-  ];
+          pointToLayer: function (feature, latlng) {
+
+            let icon = L.icon({
+              iconSize: [25, 41],
+              iconAnchor: [13, 41],
+              iconUrl: 'assets/img/markers/marker-icon.png',
+              iconRetinaUrl: 'assets/img/markers/marker-icon-2x.png',
+              shadowUrl: 'assets/img/markers/marker-shadow.png'
+            });
+            let zIndexOffset = 100;
+            return L.marker(latlng, { icon: icon, zIndexOffset: zIndexOffset, riseOnHover: true, riseOffset: 500 });
+          },
+          onEachFeature: (feature, layer) => {
+            let text="";
+            for(let p in feature.properties){
+              text+=`${p}: ${feature.properties[p]}\n`;
+            }
+            layer.bindPopup(text);
+          }
+        })
+        .on('popupclose', ($event) => {
+        })
+        return layer;
+  }
   
 }

src/app/pages/maps/maps-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { MapsComponent } from './maps.component';
 import { LeafletComponent } from './leaflet/leaflet.component';
+import { SingleMapComponent } from './single-map/single-map.component';
 
 const routes: Routes = [{
   path: '',
@@ -10,6 +11,10 @@ const routes: Routes = [{
   children: [{
     path: 'leaflet',
     component: LeafletComponent,
+  },
+  {
+    path:"single-map",
+    component:SingleMapComponent
   }],
 }];
 
@@ -21,5 +26,6 @@ export class MapsRoutingModule { }
 
 export const routedComponents = [
   MapsComponent,
-  LeafletComponent
+  LeafletComponent,
+  SingleMapComponent
 ];

src/app/pages/maps/maps.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { GoogleMapsModule } from '@angular/google-maps';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { NgxEchartsModule } from 'ngx-echarts';
-import { NbCardModule } from '@nebular/theme';
+import { NbCardModule, NbRadioModule } from '@nebular/theme';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { MapsRoutingModule, routedComponents } from './maps-routing.module';
+import { MatCardModule } from '@angular/material/card';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -15,6 +17,9 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
     MapsRoutingModule,
     NgxEchartsModule,
     NbCardModule,
+    MatCardModule,
+    NbRadioModule,
+    FormsModule 
   ],
   exports: [],
   declarations: [

src/app/pages/maps/single-map/single-map.component.scss

+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card-body {
+    padding: 0;
+  }
+
+  ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
+    z-index: 997;
+  }
+
+  ::ng-deep .leaflet-container {
+    width: 100%;
+    height: nb-theme(card-height-large);
+  }
+}

src/app/pages/maps/single-map/single-map.component.ts

+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+
+import * as L from 'leaflet';
+import 'style-loader!leaflet/dist/leaflet.css';
+
+import AMTram2020 from '../../../../assets/map/am_tram_2020.json';
+import AMTram2018 from '../../../../assets/map/am_tram_2018.json';
+
+@Component({
+  selector: 'ngx-single-map',
+  styleUrls: ['./single-map.component.scss'],
+  template: `
+  <div class="row d-flex justify-content-between align-items-center">
+  <nb-card class="col-12">
+    <nb-card-header>Tram 2018-2020</nb-card-header>
+    <nb-card-body>
+      <div leaflet #map 
+      [leafletOptions]="options" 
+      (leafletMapReady)="onMapReady($event)"
+      >
+    </div>
+      <div class="mt-1">
+        <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua.
+        </p>
+      </div>
+      <nb-radio-group  [(ngModel)]="topLayer" (valueChange)="setLayerToFront($event)" layout="row">
+        <nb-radio value="2020">Tram 2020</nb-radio>
+        <nb-radio value="2018">Tram 2018</nb-radio>
+      </nb-radio-group>
+    </nb-card-body>
+  </nb-card>
+  </div>`
+})
+export class SingleMapComponent implements OnInit {
+
+  public map: L.Map;
+
+  icon = new L.Icon({
+    iconSize: [25, 41],
+    iconAnchor: [13, 41],
+    iconUrl: 'assets/img/markers/marker-icon.png',
+    iconRetinaUrl: 'assets/img/markers/marker-icon-2x.png',
+    shadowUrl: 'assets/img/markers/marker-shadow.png'
+  });
+
+  topLayer = "2020";
+
+  options = {
+    layers: [
+      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
+    ],
+    zoom: 9,
+    center: L.latLng({ lat: 52.372664783594274, lng: 4.8950958251953125 }),
+  };
+
+  layer2020: L.GeoJSON;
+  layer2018: L.GeoJSON;
+
+  constructor(private cdRef: ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+    this.layer2020 = this.getLayer('2020', <any>AMTram2020);
+    this.layer2018 = this.getLayer('2018', <any>AMTram2018);
+  }
+
+  onMapReady(map: L.Map) {
+    this.map = map;
+    setTimeout(() => {
+      this.map.invalidateSize();
+      this.map.addLayer(this.layer2018);
+      this.map.addLayer(this.layer2020);
+      this.map.fitBounds(this.layer2020.getBounds(), {
+        padding: [50, 50]
+      });
+    }, 50);
+
+  }
+
+  public getLayer(title, l): L.GeoJSON {
+
+    let layer = L.geoJSON(l,
+      {
+        onEachFeature: (feature, layer) => {
+          let text = "";
+          for (let p in feature.properties) {
+            text += `${p}: ${feature.properties[p]}\n`;
+          }
+          layer.bindPopup(text);
+        },
+        style: function () {
+          if (title == '2020')
+            return { color: '#248175', weight: 7, opacity: 0.8 }
+          else
+            return { color: "#242c81", weight: 5, opacity: 0.8 }
+        }
+      },
+    )
+      .on('popupclose', ($event) => {
+      })
+
+    layer['_id'] = title;
+    return layer;
+  }
+
+  setLayerToFront($event) {
+    this.map.removeLayer(this.layer2018)
+    this.map.removeLayer(this.layer2020)
+    if ($event == "2018") {
+      this.map.addLayer(this.layer2020)
+      this.map.addLayer(this.layer2018)
+    } else {
+      this.map.addLayer(this.layer2018)
+      this.map.addLayer(this.layer2020)
+    }
+
+    this.map.invalidateSize()
+    this.cdRef.detectChanges()
+  }
+
+}
+

src/app/pages/pages-menu.ts

@@ -15,8 +15,12 @@ export const MENU_ITEMS: NbMenuItem[] = [
     icon: 'map-outline',
     children: [
       {
-        title: 'Leaflet Maps',
+        title: 'Amsterdam Tram Maps',
         link: '/pages/maps/leaflet',
+      },
+      {
+        title: 'Amsterdam Tram Compare',
+        link: '/pages/maps/single-map',
       }
     ],
   },
@@ -39,7 +43,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
     ],
   },
   {
-    title: 'External App',
+    title: 'Additional Applications',
     icon: 'external-link-outline',
     link: '/pages/external-app',
     children: [

src/assets/config.json

@@ -13,8 +13,8 @@
             "url": "https://idra.eng.it",
             "title": "Idra",
             "subtitle":"Open Data Federation Platform",
-            "avatar": "https://idra.eng.it/images/idra_D_v6_black.svg", 
-            "image": "https://idra.readthedocs.io/en/latest/user/userhomepage.png",
+            "avatar": "/assets/images/idra_D_v6_black.svg", 
+            "image": "/assets/images/userhomepage.png",
             "description": "Idra is a web application able to federate existing Open Data Management Systems (ODMS) based on different technologies providing a unique access point to search and discover open datasets coming from heterogeneous sources. Idra uniforms representation of collected open datasets, thanks to the adoption of international standards (DCAT-AP) and provides a set of RESTful APIs to be used by third party applications.",
             "responsible_partner":"ENG"
         }

tsconfig.json

@@ -9,6 +9,8 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "resolveJsonModule": true, 
+    "esModuleInterop": true,
     "target": "es2015",
     "typeRoots": [
       "node_modules/@types"