Usage of Leaflet with Ionic2 typescript

Question

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 or npm install leaflet-map or 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 1

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="https://unpkg.com/[email protected]/dist/leaflet.css" />

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

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

   L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      accessToken: 'xxx'
    }).addTo(this.map);

}