From cd123239bc1fac057221e8a57a348e96194c951f Mon Sep 17 00:00:00 2001 From: Nilesh Date: Sat, 24 Apr 2021 22:01:06 +0530 Subject: [PATCH 1/3] Integrated leaftlet map correctly. --- angular.json | 9 +- .../pages/maps/leaflet/leaflet.component.scss | 5 ++ .../pages/maps/leaflet/leaflet.component.ts | 88 +++++++++++++++++-- src/app/pages/maps/maps.module.ts | 2 +- 4 files changed, 92 insertions(+), 12 deletions(-) diff --git a/angular.json b/angular.json index 450459a54b..9e0adccd5c 100644 --- a/angular.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss index 253a44713f..751ab0bd54 100644 --- a/src/app/pages/maps/leaflet/leaflet.component.scss +++ b/src/app/pages/maps/leaflet/leaflet.component.scss @@ -15,3 +15,8 @@ height: nb-theme(card-height-large); } } + +.map { + height: 100%; + padding: 0; +} \ No newline at end of file diff --git a/src/app/pages/maps/leaflet/leaflet.component.ts b/src/app/pages/maps/leaflet/leaflet.component.ts index 30333e797c..ff4c2769b6 100644 --- a/src/app/pages/maps/leaflet/leaflet.component.ts +++ b/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'; Leaflet Maps -
+
`, }) 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: '© OpenStreetMap contributors' + }); + wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', { + detectRetina: true, + attribution: '© OpenStreetMap 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 ]) }; + } diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts index de12b68900..684b0680c4 100644 --- a/src/app/pages/maps/maps.module.ts +++ b/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, From a1c4ab8033d587da2879ae6e0f9042ed5b645946 Mon Sep 17 00:00:00 2001 From: Nilesh Date: Sat, 24 Apr 2021 22:05:59 +0530 Subject: [PATCH 2/3] Integrated leaftlet map correctly. --- .../pages/maps/leaflet/leaflet.component.ts | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/app/pages/maps/leaflet/leaflet.component.ts b/src/app/pages/maps/leaflet/leaflet.component.ts index ff4c2769b6..9336ac8823 100644 --- a/src/app/pages/maps/leaflet/leaflet.component.ts +++ b/src/app/pages/maps/leaflet/leaflet.component.ts @@ -24,17 +24,17 @@ export class LeafletComponent { map.fitBounds(this.route.getBounds(), { padding: point(24, 24), maxZoom: 12, - animate: true + 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: '© OpenStreetMap contributors' + attribution: '© OpenStreetMap contributors', }); wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', { detectRetina: true, - attribution: '© OpenStreetMap contributors' + attribution: '© OpenStreetMap contributors', }); // Marker for the top of Mt. Ranier @@ -43,23 +43,23 @@ export class LeafletComponent { iconSize: [ 25, 41 ], iconAnchor: [ 13, 41 ], iconUrl: 'leaflet/marker-icon.png', - shadowUrl: 'leaflet/marker-shadow.png' - }) + shadowUrl: 'leaflet/marker-shadow.png', + }), }); // Marker for the parking lot at the base of Mt. Ranier trails - paradise = marker([ 46.78465227596462,-121.74141269177198 ], { + 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' - }) + shadowUrl: 'leaflet/marker-shadow.png', + }), }); // Path from paradise to summit - most points omitted from this example for brevity - route = polyline([[ 46.78465227596462,-121.74141269177198 ], + route = polyline([[ 46.78465227596462, -121.74141269177198 ], [ 46.80047278292477, -121.73470708541572 ], [ 46.815471360459924, -121.72521826811135 ], [ 46.8360239546746, -121.7323131300509 ], @@ -79,13 +79,13 @@ export class LeafletComponent { layersControl = { baseLayers: { 'Street Maps': this.streetMaps, - 'Wikimedia Maps': this.wMaps + 'Wikimedia Maps': this.wMaps, }, overlays: { 'Mt. Rainier Summit': this.summit, 'Mt. Rainier Paradise Start': this.paradise, - 'Mt. Rainier Climb Route': this.route - } + 'Mt. Rainier Climb Route': this.route, + }, }; @@ -93,7 +93,7 @@ export class LeafletComponent { options = { layers: [ this.streetMaps, this.route, this.summit, this.paradise ], zoom: 7, - center: latLng([ 46.879966, -121.726909 ]) + center: latLng([ 46.879966, -121.726909 ]), }; } From bf79e7c16e5e9ff02c152d0bf7de5fc53b36eed6 Mon Sep 17 00:00:00 2001 From: Nilesh Date: Sat, 24 Apr 2021 22:07:16 +0530 Subject: [PATCH 3/3] Integrated leaftlet map correctly. --- src/app/pages/maps/leaflet/leaflet.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss index 751ab0bd54..583a4999fb 100644 --- a/src/app/pages/maps/leaflet/leaflet.component.scss +++ b/src/app/pages/maps/leaflet/leaflet.component.scss @@ -19,4 +19,4 @@ .map { height: 100%; padding: 0; -} \ No newline at end of file +}