Ionic with LeafletJS

Ionic Framework ionic-v3
5

Try to use this one
https://www.npmjs.com/package/leaflet

assume home.ts

import Leaflet from 'leaflet';

constructor(){}

ngOnInit(): void {
    this.map = Leaflet.map('map')
        .setView([51.505, -0.09], 13);

    L.tileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',
        maxZoom: 18
      }).addTo(this.map);

  }

assume home.html

<ion-content>
  <div style="position:absolute;height: 100%;width:100%" id="map"></div>
</ion-content>

in your src/index.html add this line

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />

-note : I think not the best way to add a css file.

1 Like