Hi there,
I essentially copied this example to display LeafletJS maps with Ionic2. It works fine with ionic serve, but when I run on the device / simulator I keep getting a blank view.
Testing the blank example works on all platforms, but when I place the map into the html the page remains blank.
I did not modify anything from the example. May it be some files are missing? One additional major hurdle is the fact that debugging TS files is extremely tedious and you cant pinpoint where it gets stuck (AFAIK).
What platform? iOS? Android? Windows Phone?
ios
Should that make an difference? I am tying to migrate my Ionic1 to Ionic2 app and the map is THE essential part.
I tried Google Maps as well based on http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/ , but blank screen again.
It makes a difference in that I can now tell you to try and debug your iOS app using Safari remote debugging: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
That way you should at least see if there are any errors in the console.
Hi, thanks, I know these things from IO1 but fact is (AFAIK) you cant see any source, only tanspiled stuff. I get no errors in Safari.
I am not sure if the blank screen is due to my lack of Ionic2 experience or if it’s because it simply doesn’t work.
What if you inspect the elements? Maybe the map is there but not visible because it has size 0 or something like that.
1 Like
Will do when I am back at the project. Right now I see a potential problem - there’s a ; missing in the style. Would iOS Safari catch that? I’m not at the dev machine right now to test.
<ion-content>
<div style="height: 100%" id="map"></div>
</ion-content>
For my understanding -
when I add a module like this
npm install leaflet --save
npm install @types/leaflet --save
and import it
import * as Leaflet from "leaflet";
will these files be automatically added as dependencies to the build by ionic-app-script or do I have to modify the file?
You were right. Thank you.
I had to wrap the map object into a div that derived the size from the ion-content.
Without the encapsulating div and with map on 100% only it wouldn’t show properly on the device.
<ion-content>
<div style="height: 100%;width:100%;">
<div style="height: 100%;width:100%;" id="map"></div>
</div>
</ion-content>
I’m trying exactly the same, but for me it’s neither working in the browser. The tiles are not arranged right and tiles keep missing, but there’s no error at all. It keeps looking like this:
Try this template, it’s working.
Yes i used it, but i simply missed to add <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> to the src/app/index.html 
1 Like
Have you already tried to use Leaflet with GeoJSON in Ionic 2? Do you probably have any advice about this?
Sorry, don’t use GeoJSON in my project
Hi Marti,
Cool its working for me , save my day .
Thanks
