Maps
Google Maps Offical link Preview link
you have to install google map
npm i @angular/google-mapsMap at a specified location with Marker
<div class="container-fluid">
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-header card-no-border pb-0">
<h5>Map at a specified location with Marker</h5>
</div>
<div class="card-body map-z-index">
<google-map width="100%" height="500px" [zoom]="zoom">
@for( marker of markers ; track maker){
<map-marker [position]="marker.position" [label]="marker.label"></map-marker>
}
</google-map>
</div>
</div>
</div>
</div>
</div>
To use google map following type script files
import { Component } from '@angular/core';
import { GoogleMap, MapMarker } from '@angular/google-maps';
interface IMarkerPosition {
lat: number;
lng: number;
}
interface IMarkerLabel {
color: string;
text: string;
}
interface IGoogleMapMarkers {
position: IMarkerPosition;
label: IMarkerLabel;
}
@Component({
selector: 'app-google-map',
templateUrl: './google-map.html',
styleUrls: ['./google-map.scss'],
imports: [GoogleMap, MapMarker],
})
export class GoogleMaps {
public asiaMapOptions: google.maps.MapOptions = {
center: { lat: 47.5162, lng: 100.2167 },
zoom: 3,
};
public worldMapOption: google.maps.MapOptions = {
center: { lat: 0, lng: 0 },
zoom: 2,
};
public usaMapOptions: google.maps.MapOptions = {
center: { lat: 37.0902, lng: -95.7129 },
zoom: 4,
};
public indiaMapOptions: google.maps.MapOptions = {
center: { lat: 20.5937, lng: 78.9629 },
zoom: 4,
};
public markers: IGoogleMapMarkers[];
public zoom: number;
constructor() {
this.markers = [];
this.markers.push({
position: {
lat: 32.4279,
lng: 53.688,
},
label: {
color: 'black',
text: 'Iran',
},
});
this.markers.push({
position: {
lat: 33.9391,
lng: 67.71,
},
label: {
color: 'black',
text: 'Afghanistan',
},
});
this.markers.push({
position: {
lat: 23.0225,
lng: 72.5714,
},
label: {
color: 'black',
text: 'Ahmadabad',
},
});
}
}
Leaflet Maps Offical link Preview link
you have to install Leaflet map
npm i @asymmetrik/ngx-leafletSimple Map
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-header card-no-border pb-0">
<h3>Simple Map</h3>
</div>
<div class="card-body">
<div style="height: 500px; z-index: 0;" leaflet
[leafletOptions]="options1"></div>
</div>
</div>
</div>
</div>
To use Leaflet Maps following type script files
import { Component } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import * as L from 'leaflet';
@Component({
selector: 'app-leaflet-map',
templateUrl: './leaflet-map.html',
styleUrls: ['./leaflet-map.scss'],
imports: [LeafletModule],
})
export class LeafletMap {
options1 = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '...',
}),
],
zoom: 5,
center: L.latLng(46.879966, -121.726909),
};
//Second map
layersControl = {
baseLayers: {
'Open Street Map': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '...',
}),
'Open Cycle Map': L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '...',
}),
},
overlays: {
'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
'Big Square': L.polygon([
[46.8, -121.55],
[46.9, -121.55],
[46.9, -121.7],
[46.8, -121.7],
]),
},
};
options2 = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 50,
attribution: '...',
}),
],
zoom: 5,
center: L.latLng(46.879966, -121.726909),
};
//Third map
map: L.Map;
options3 = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '',
}),
],
zoom: 7,
center: L.latLng(47.482023, -1),
};
//Forth map
map4: L.Map;
homeCoords = {
lat: 23.810331,
lon: 90.412521,
};
popupText = 'Some popup text';
markerIcon = {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: 'assets/images/marker-icon.png',
shadowUrl: 'assets/images/marker-shadow.png',
}),
};
options4 = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '',
}),
],
zoom: 5,
center: L.latLng(this.homeCoords.lat, this.homeCoords.lon),
};
initMarkers() {
const popupInfo = `${this.popupText}`;
L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
.addTo(this.map4)
.bindPopup(popupInfo);
}
onMapReady4(map: L.Map) {
this.map4 = map;
this.initMarkers();
}
}