Add Leaflet Markers, Popups and Circle

Although this article is part of series but you can follow along without going through the whole series. All the information provided can be applied to any JavaScript project.

1. Add simple Leaflet Map
2. Add Leaflet Markers, Popup and Circle

Previously, we build a simple map with leaflet. In this article we will look into location markers along with the circle and popups. The marker will appear with interesting bounce effect.

The final preview of our app would look like following

(Click to load, size 259kb)

Leaflet Markers

A marker on a map is simply a draggable and clickable icon on the map. Leaflet location marker API makes it really easy to add a marker to our map. All we have to do is to provide geographical point (latlng) along with options object. So let’s see it in the implementation.

So I will be using code of previous article as base and build on top it. If we preview our app now. We will be staring at blank map with no interaction. So first thing we can do is add the home marker. So let’s write some code

Right at the bottom of ngOnInit function we will call another function that would contain the home marker logic.

    ngOnInit() {
    this.map = L.map('map', {
      center: [ 25.3791924,55.4765436 ],
      zoom: 15,
      renderer: L.canvas()
    })

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap',
    }).addTo(this.map)

    this.addHomeMarker();
    
    setTimeout(() => {
      this.map.invalidateSize();
    }, 0);
  }
  
  addHomeMarker() {
    const homeMarker = L.marker({ lat: 25.3791924, lng: 55.4765436 }, { bounceOnAdd: true });
    homeMarker.bindPopup('This is our Home marker', {
      closeButton: true
    });
    homeMarker.addTo(this.map);
  }

On line 12 we are calling the method. The first line of addHomeMarker uses Marker method of leaflet, which accepts geo points and options object. Then the popup is bound which means it will appear on clicking the marker. Finally the homeMarker is to added to our map.

Leaflet Popup

This API that add popup to leaflet markers is quite simple. All we have to do is to provide string as first argument followed by configuration object.

Image Problems

If you don’t see any marker, the reason might be failing to load the images. You could see the errors in the browser console. The temporary solution is to import the image paths at top of the file like below

    import { Component } from '@angular/core';

import * as L from "leaflet";
import 'leaflet.BounceMarker'

import "leaflet/dist/images/marker-shadow.png";
import "leaflet/dist/images/marker-icon.png";
import "leaflet/dist/images/marker-icon-2x.png";

We will later discuss the permanent solution.

Leaflet Circle

Drawing circle in our map are helpful when we need to show information in a bounding box. For example the Router disperses signal in in circular form. The distance is measured in radius. That’s why leaflet circle is our best bet. For that same reason it accepts radius in meters

So let’s update our code with the code of circle.

    addHomeMarker() {
    //...

    L.circle({lat: 25.3791924, lng: 55.4765436}, {
      color: 'steelblue',
      radius: 500,
      fillColor: 'steelblue',
      opacity: 0.5
    }).addTo(this.map)
  }

After adding all this code, let’s see how our preview looks like

Add Marker with click handler

Let’s do a little more experimental with locations markers. By making it draggable and animate it with bounce drop effect. Let’s write some HTML for the button where we can click on.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="addMarker()">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

    addMarker() {
    L.marker({lat: 25.3791924, lng: 55.4765436}, {
      draggable: true, 
      bounceOnAdd: true
    }).addTo(this.map)
  }

We are calling addMarker function that adds the location marker at the center. In order to add the bounce effect we need to install plugin.

Animating Leaflet Markers

Leaflet has good lot of plugins that helps us in extending the leaflet. One such plugin is leaflet.bouncemaker. So let’s install it

npm install https://github.com/maximeh/leaflet.bouncemarker

    addMarker() {
    L.marker({lat: 25.3791924, lng: 55.4765436}, {
      draggable: true, 
      bounceOnAdd: true
    }).addTo(this.map)
  }

We have modified our code with one such property bounceOnAdd. We can also provide more options to this plugin. Such as increasing the rate, frequency as well as providing callback function.

Conclusion

We have just scratched the surface as far as Leaflet Marker API is concerned. There is a lot more to it according to documentation. For instance on drag finish of location marker we can get the geo points of new location. Same true for leaflet circle and leaflet popup.

Screencast