I am trying to add the zoomHome plugin to my leaflet map in my ionic app.
The map is displaying as expected before adding this code.
I added the below code 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 logged:
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?
