Creating a Map View with Pulsating Markers in Angular Using Leaflet
Introduction
This tutorial guides you through implementing a map view in an Angular project using Leaflet. We'll add custom markers with pulsating circles for specific locations and standard circle markers. We assume you have a basic Angular project set up. Our focus will be on creating a map-view
component that integrates a Leaflet map with these special markers.
Credits
The CSS for the pulsating circle markers is inspired by this example by Peeke on CodePen. Kudos to them for the fantastic design!
Step 1: Setting Up Leaflet in Your Angular Project
First, install Leaflet in your project:
npm install leaflet
Include Leaflet's CSS in your global styles file (styles.scss
):
@import "~leaflet/dist/leaflet.css";
Step 2: Creating the Map-View Component
Generate a new component named map-view
:
ng generate component map-view
In your map-view.component.ts
, import Leaflet and set up the basic structure:
import * as Leaflet from 'leaflet';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-map-view',
templateUrl: './map-view.component.html',
styleUrls: ['./map-view.component.scss']
})
export class MapViewComponent implements OnInit {
private map!: Leaflet.Map;
ngOnInit(): void {
// Initialize the map here
}
}
Step 3: Implementing the Map and Markers
In map-view.component.html
, add the map container:
<div class="map-container" leaflet></div>
Now, back in your TypeScript file, initialize the map and add markers:
ngOnInit(): void {
this.map = Leaflet.map('map-container').setView([51.505, -0.09], 13);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(this.map);
// Add markers here
}
Step 4: Adding Pulsating Circle Markers
In your global styles.scss
, add the CSS for the pulsating circles:
.leaflet-div-icon {
/* Pulsating Circle CSS here */
/* Credit: https://codepen.io/peeke/pen/BjxXZa */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
/* Added this two to override the default from leaflet.divIcon */
background: none !important;
border: 0px !important;
&:before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #26941a;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: #b6ac0b;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
}
@keyframes pulse-ring {
0% {
transform: scale(.33);
}
80%, 100% {
opacity: 0;
}
}
@keyframes pulse-dot {
0% {
transform: scale(.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(.8);
}
}
Back in the map-view.component.ts
, modify the function to create markers:
private createPulsatingMarker(lat: number, lng: number): Leaflet.Marker {
const icon = Leaflet.divIcon({
iconSize: [30, 30]
});
return Leaflet.marker([lat, lng], { icon: icon });
}
Use this function to add pulsating markers to your map:
ngOnInit(): void {
// ... map initialization code ...
// Example position for a pulsating marker
const pulsatingMarker = this.createPulsatingMarker(51.505, -0.09);
pulsatingMarker.addTo(this.map);
}
Step 5: Adding Circle Markers
For standard circle markers, use Leaflet's circleMarker
function:
private createCircleMarker(lat: number, lng: number): Leaflet.CircleMarker {
return Leaflet.circleMarker([lat, lng], { color: 'blue', radius: 10 });
}
ngOnInit(): void {
// ... existing code ...
// Example position for a circle marker
const circleMarker = this.createCircleMarker(51.51, -0.1);
circleMarker.addTo(this.map);
}
Conclusion
As you will see in the GIF attached, The pulsating circles are the yellow colored circles and the default circleMarkers from leaflet is yellow.
And with this, You now have a functional map view in your Angular application with both pulsating circle markers and standard circle markers using Leaflet. Experiment with different marker styles and map features to enhance your application's mapping capabilities.
Remember, the beauty of Leaflet is its flexibility and ease of use, making it a great choice for implementing interactive maps in web applications.