I am trying to add the zoomHome plugin to my ionic app.
Here are the steps I’ve taken so far:
- 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?