Ionic with LeafletJS

Ionic Framework ionic-v3
1

Hi. We’re developing a navigation app. We’re using Ionic 3 and for the map we’re using LeafletJS. However, at the moment, the way we’re using the map is we grabbed access tokens from mapbox and put the leafletJS map code in the index.html file of the ionic 3 project itself. it works. but i know it’s wrong. I know it should be treated as a separate component, but i can’t get it working when i declare it as a template or put it in a new page html file and import it into a typscript then export it. any ideas? our current problem is with the script links and script src. we don’t know where to place them so we just put them in index.html and that’s what’s working right now.

2

You are probably looking at something like this:


(No endorsement, found it by googling for “leaflet angular2”)

1 Like
3

thank you so much for replying. i will try looking at this. i see, however, that it is angular 2. ionic 3 projects are based on angular4 :(. but i’ll see what i can use of it. i’ll update as soon as possible with my hectic schedule. thank you!

4

i’ve tried it out, but i’ve encountered some problems. first issue is i don’t know how to utilize the leaflet docs. do i still use them? or can i only use the ones provided in what you sent me? second, i see this is based on angular2. im using angular 4. so whenever i try to npm install and npm start it, it won’t work. there are problems like a missing package.json file and sorts which i have tried to fix but to no end. any insight?

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
6

That shouldn’t be a problem as there is not really much different - it’s all Angular.
But as I said, I just googled that one - maybe it is indeed broken. The other reply looks much better and proven.

7

ah. your help is deeply appreciated. thank you for your time sir

8

Thank you this library seems to work better with Ionic4. I haven’t found a better one.