In most of the apps, maps are one of the most useful tools for users when included in an app. In the last example, I had added Google map in ionic. In this example, we learning how to add Leaflet map in Ionic 3.
Step 1: Step up the project
Step 2: Set up the Tabs Template
We don’t need to test this app on real device, we can test on the browser. First, we modify the existing code of the tab.html. Replace existing code with the following code in pages/tabs/tabs.html
We will rename the existing page to the new name, in first two tab page we will display the different location and different design for each page and last page we will displaying multiple markers.
Modify the tabs.ts file
Step 3: Set up First Leaflet design
Add the following code in src/pages/leaflet/leaflet.html
Add the following code in src/pages/leaflet/leaflet.ts
Add the following code in leaflet.scss
Step 4: Set up Second Leaflet design
Add the following code in src/pages/leaflet2/leaflet2.html
Add the following code in src/pages/leaflet2/leaflet2.ts
Add the following code in leaflet2.scss
Step 5: Adding multiple markers in Leaflet Map
We have created three-page in this apps, two to display the list of the single leaflet map. This page we will add multiple leaflet marker in the Leaflet map.
Add following data on data.JSON in www/assets/data/data.json as
Add the following code in src/pages/allMap/allMap.html
Add the following code in src/pages/allMap/allMap.ts