Using Leaflet with Ionic2 typescript

Question

I am new to Ionic2 and Angular2 with typescript and I want to create a mobile application for iOS and Android. As the next step, I want to turn on the map and find the Flyer to easily change between GoogleMaps and OSM, ...

So, my problems began with the installation: There are various packages, such as npm install leaflet or npm install leaflet-map or npm install ui-leaflet and many others.

Secondly, I do not know how to enable these packages. It would be great if someone could provide me with a really simple basic application in Ionic2 showing a map of booklets.

Answer 1

Ok .. First install the booklet and its vise

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

Then import the flyers into your component or something else with

 import 'leaflet'; 

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

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

Since styleUrls: [] still does not work in Ionic2, you also need to add leaf styles to your html file:

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> 

After this preparation, you can start with a leaflet tutorial as follows:

 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); }