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.