Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Integrated leaftlet map correctly.

Browse source
This commit is contained in:
Nilesh 2021-04-24 22:05:59 +05:30
parent cd123239bc
commit a1c4ab8033
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/app/pages/maps/leaflet/leaflet.component.ts
View file

@ -24,17 +24,17 @@ export class LeafletComponent {
map.fitBounds(this.route.getBounds(), { map.fitBounds(this.route.getBounds(), {
padding: point(24, 24), padding: point(24, 24),
maxZoom: 12, maxZoom: 12,
animate: true animate: true,
}); });
} }
// Define our base layers so we can reference them multiple times // Define our base layers so we can reference them multiple times
streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { streetMaps = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
detectRetina: true, detectRetina: true,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}); });
wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', { wMaps = tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
detectRetina: true, detectRetina: true,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}); });
// Marker for the top of Mt. Ranier // Marker for the top of Mt. Ranier
@ -43,23 +43,23 @@ export class LeafletComponent {
iconSize: [ 25, 41 ], iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ], iconAnchor: [ 13, 41 ],
iconUrl: 'leaflet/marker-icon.png', 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 // 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({ icon: icon({
iconSize: [ 25, 41 ], iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ], iconAnchor: [ 13, 41 ],
iconUrl: 'leaflet/marker-icon.png', iconUrl: 'leaflet/marker-icon.png',
iconRetinaUrl: 'leaflet/marker-icon-2x.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 // 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.80047278292477, -121.73470708541572 ],
[ 46.815471360459924, -121.72521826811135 ], [ 46.815471360459924, -121.72521826811135 ],
[ 46.8360239546746, -121.7323131300509 ], [ 46.8360239546746, -121.7323131300509 ],
@ -79,13 +79,13 @@ export class LeafletComponent {
layersControl = { layersControl = {
baseLayers: { baseLayers: {
'Street Maps': this.streetMaps, 'Street Maps': this.streetMaps,
'Wikimedia Maps': this.wMaps 'Wikimedia Maps': this.wMaps,
}, },
overlays: { overlays: {
'Mt. Rainier Summit': this.summit, 'Mt. Rainier Summit': this.summit,
'Mt. Rainier Paradise Start': this.paradise, '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 = { options = {
layers: [ this.streetMaps, this.route, this.summit, this.paradise ], layers: [ this.streetMaps, this.route, this.summit, this.paradise ],
zoom: 7, zoom: 7,
center: latLng([ 46.879966, -121.726909 ]) center: latLng([ 46.879966, -121.726909 ]),
}; };
} }