Leaflet fix

angular.json

@@ -24,8 +24,8 @@
               "src/favicon.png",
               {
                 "glob": "**/*",
-                "input": "node_modules/leaflet/dist/images",
-                "output": "/assets/img/markers"
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "leaflet/"
               }
             ],
             "styles": [
@@ -189,5 +189,8 @@
     "@schematics/angular:directive": {
       "prefix": "ngx"
     }
+  },
+  "cli": {
+    "analytics": "64da436d-4c24-46a2-a69a-8ef1460a6002"
   }
-}
+}

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

@@ -15,3 +15,8 @@
     height: nb-theme(card-height-large);
   }
 }
+
+.map {
+  height: 100%;
+  padding: 0;
+}

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

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
-import * as L from 'leaflet';
-import 'style-loader!leaflet/dist/leaflet.css';
+import { icon, latLng, Map, marker, point, polyline, tileLayer } from 'leaflet';
 
 @Component({
   selector: 'ngx-leaflet',
@@ -10,18 +9,91 @@ import 'style-loader!leaflet/dist/leaflet.css';
     <nb-card>
       <nb-card-header>Leaflet Maps</nb-card-header>
       <nb-card-body>
-        <div leaflet [leafletOptions]="options"></div>
+      <div class="map"
+     leaflet
+     (leafletMapReady)="onMapReady($event)"
+     [leafletOptions]="options"
+     [leafletLayersControl]="layersControl"></div>
       </nb-card-body>
     </nb-card>
   `,
 })
 export class LeafletComponent {
 
+  onMapReady(map: Map) {
+    map.fitBounds(this.route.getBounds(), {
+      padding: point(24, 24),
+      maxZoom: 12,
+      animate: true,
+    });
+  }
+  // Define our base layers so we can reference them multiple times
+  streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  });
+  wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
+    detectRetina: true,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  });
+
+  // Marker for the top of Mt. Ranier
+  summit = marker([ 46.8523, -121.7603 ], {
+    icon: icon({
+      iconSize: [ 25, 41 ],
+      iconAnchor: [ 13, 41 ],
+      iconUrl: 'leaflet/marker-icon.png',
+      shadowUrl: 'leaflet/marker-shadow.png',
+    }),
+  });
+
+  // Marker for the parking lot at the base of Mt. Ranier trails
+  paradise = marker([ 46.78465227596462, -121.74141269177198 ], {
+    icon: icon({
+      iconSize: [ 25, 41 ],
+      iconAnchor: [ 13, 41 ],
+      iconUrl: 'leaflet/marker-icon.png',
+      iconRetinaUrl: 'leaflet/marker-icon-2x.png',
+      shadowUrl: 'leaflet/marker-shadow.png',
+    }),
+  });
+
+  // Path from paradise to summit - most points omitted from this example for brevity
+  route = polyline([[ 46.78465227596462, -121.74141269177198 ],
+    [ 46.80047278292477, -121.73470708541572 ],
+    [ 46.815471360459924, -121.72521826811135 ],
+    [ 46.8360239546746, -121.7323131300509 ],
+    [ 46.844306448474526, -121.73327445052564 ],
+    [ 46.84979408048093, -121.74325201660395 ],
+    [ 46.853193528950214, -121.74823296256363 ],
+    [ 46.85322881676257, -121.74843915738165 ],
+    [ 46.85119913890958, -121.7519719619304 ],
+    [ 46.85103829018772, -121.7542376741767 ],
+    [ 46.85101557523012, -121.75431755371392 ],
+    [ 46.85140013694763, -121.75727385096252 ],
+    [ 46.8525277543813, -121.75995212048292 ],
+    [ 46.85290292836726, -121.76049157977104 ],
+    [ 46.8528160918504, -121.76042997278273 ]]);
+
+  // Layers control object with our two base layers and the three overlay layers
+  layersControl = {
+    baseLayers: {
+      'Street Maps': this.streetMaps,
+      'Wikimedia Maps': this.wMaps,
+    },
+    overlays: {
+      'Mt. Rainier Summit': this.summit,
+      'Mt. Rainier Paradise Start': this.paradise,
+      'Mt. Rainier Climb Route': this.route,
+    },
+  };
+
+
+  // Set the initial set of displayed layers (we could also use the leafletLayers input binding for this)
   options = {
-    layers: [
-      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
-    ],
-    zoom: 5,
-    center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
+    layers: [ this.streetMaps, this.route, this.summit, this.paradise ],
+    zoom: 7,
+    center: latLng([ 46.879966, -121.726909 ]),
   };
+
 }

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

@@ -11,7 +11,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
   imports: [
     ThemeModule,
     GoogleMapsModule,
-    LeafletModule.forRoot(),
+    LeafletModule,
     MapsRoutingModule,
     NgxEchartsModule,
     NbCardModule,