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

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).

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

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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
      maxZoom: 18,
      accessToken: 'xxx'
    }).addTo(this.map);

}