Unable to successfully import zoomHome plugin in ionic app

Ionic Framework
1

I am trying to add the zoomHome plugin to my ionic app.

Here are the steps I’ve taken so far:

  1. I added the below links inside the head section of index.html:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="assets/external-assets/leaflet.zoomhome.min.js"></script>
<link rel="stylesheet" href="assets/external-assets/leaflet.zoomhome.css" />

In my assets folder, I created a sub folder called external-assets, & copied the following files from https://github.com/torfsen/leaflet.zoomhome/tree/master/dist:

  • leaflet.zoomhome.css
  • leaflet.zoomhome.min.js

Here, I set the default zoom as false:

this.map = L.map('map', {
      center: [lat, lng],
      zoomControl: false
    });

Then I add the zoomHome control:

let zoomHome = L.Control.zoomHome({ position: 'topright' });
zoomHome.addTo(this.map);

However, when I run ionic serve, I get this console error:

Uncaught ReferenceError: L is not defined
at leaflet.zoomhome.min.js:5

This error is also printed:

Error: Uncaught (in promise): TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome is not a function
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome is not a function
at HomePage.initMap

Can someone please tell me what I’m doing wrong, & how it can be resolved?