SoS SoS - 1 year ago 359
TypeScript Question

Usage of Leaflet with Ionic2 typescript

I'm new to Ionic2 and Angular2 with typescript and I want to build a mobile application for iOS and Android. As a next step I want to include a map and found Leaflet, to change easily between GoogleMaps and OSM, ...

So, my problems started with installing: There are different packages like

npm install leaflet
npm install leaflet-map
npm install ui-leaflet
and many more..

Second, I have no idea how to include those packages then. Would be great, if someone could provide me a really simple basic app in Ionic2 showing a leaflet-map.

Answer Source

Ok.. First install leaflet and its typings

npm install leaflet --save
npm install @types/leaflet --save

Then import leaflet to your Component or whatever with

import 'leaflet';

In the html-file add a div with id="map" and a pre-set size (better do it via css).

<div style="height: 180px" id="map"></div>

As styleUrls: [] is still buggy in Ionic2, you also have to add the leaflet styles to your html-file:

<link rel="stylesheet" href="" />

After this preparing you can start with the leaflet tutorial like this:

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

   L.tileLayer('{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
      maxZoom: 18,
      accessToken: 'xxx'

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download