LeaftJs in ionic 2

Ionic Framework ionic-v3
1

hey guys, need a help to start with the leaftjs mudule in ionic 2 apps? any help please

2
  1. Install leaflet and @types/leaflet from npm.
npm i --save leaflet @types/leaflet

Then do the following:

import L from 'leaflet';

Then you can use it as documented on their site.

This is documented here: http://ionicframework.com/docs/v2/resources/third-party-libs/

Another way to use any library you want is to include their JavaScript file in your index.html before including the app’s main js file.

Then in your app, add this line at the top of the page where you wish to use leaflet:

declare var L: any;

Then just use it as documented on their site. But using this way, you wont get any autocomplete/intellisense features in your IDE.

1 Like
3

Thanks, just time to try it

4

any help with this npm install lipisha according to https://github.com/lipisha/lipisha-node-sdk

5

after try it, i get this

image
leaflet.PNG906×31 5.2 KB
and my code is look like
ionViewDidLoad() {
var map = L.map(‘map’).setView([51.505, -0.09], 13);
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
attribution: ‘© OpenStreetMap contributors’}).addTo(map);

L.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.').openPopup();

}

6

did you create an element and give it id="map"?

7

yes <div id="map">

8

try putting your code in ngAfterViewInit

1 Like
9

great thanks @ihadeed

10

Hi @arsene123, did you really succeded in showing leaflet map? After above instructions (npm, div, ngAfter…) I get holes in tiles… https://www.dropbox.com/s/yrdorojuot400qe/localhost-8100Leaf.png?dl=0
In my opinion something is missing? anything about css? is it automaticly added properly?

11

hey @darolsz1 here is my css:
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100vh;
width: 100vw;
}

and my ts :
//the import
import L from ‘leaflet’;
ngAfterViewInit() {
var map = L.map(‘map’).setView([51.505, -0.09], 13);
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
attribution: ‘© OpenStreetMap contributors’}).addTo(map);

L.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.').openPopup();

}

// html

12

Thanks @arsene123, but what about leaflet.css? from ("\node_modules\leaflet\dist\leaflet.css"). How did you added this, where? (so that serve, and build… would see it) the import L… doesn’t take care of css, right?

13

Make a link to css file of leaftjs on src/index.html. Like link href="cdn/leaftlet.ss