I need to create maps on IONIC 4.
But it is not possible, because I don't have maps for IONIC 4.
So, is it possible to create a Leaflet Map on IONIC 4 for an App on Android?
Join Stack Overflow to learn, share knowledge, and build your career.
I need to create maps on IONIC 4.
But it is not possible, because I don't have maps for IONIC 4.
So, is it possible to create a Leaflet Map on IONIC 4 for an App on Android?
inside angular.json or any similar config doc of your app, add the following:
a)
"assets": [
...,
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "leaflet/"
}
],
b)
"styles": [
...,
"./node_modules/leaflet/dist/leaflet.css"
],
Inside your component.html:
<div id="map" style="width:100%; height:100%;"></div>
Inside your component.ts:
import { Map, latLng, tileLayer, Layer, marker } from 'leaflet';
map: Map;
then you can call a function like this when the DOM is loaded:
loadmap() {
setTimeout(() => {
this.map = new Map('map').setView([this.lat, this.lng], 8);
tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// tslint:disable-next-line
attribution: 'Map data © <a
href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a
href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery
© <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18
}).addTo(this.map);
}, 50);
}
Notice, this.lat, this.lng are my own values.
For anything else, there are the docs: https://leafletjs.com/reference-versions.html
EDIT:
Instead of setTimeout, I use Ionic's ionViewDidEnter(). SetTimeout was a workaround, because Angular's ngAfterViewInit() was not working for me.
if (this.map) return;
– Muhammet Can TONBUL
Sep 27 '19 at 7:54
Answer from @alex351 is very good. But I arrived into this thread from Google looking for "ionic4 leaflet broken map".
I had tiles not showing up, even with the import of leaflet.css.
It was because I wrote
<ion-content>
<div id="map" style="height:400px; width: 100%;"></div>
</ion-content>
It seems Ionic4 css conflicts with leaflet.
You need to get the <div>
outside of <ion-content>
.
Correct is just :
<div id="map" style="height:400px; width: 100%;"></div>
Hope this help someone