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 4.
Step 1: Step up the project
Step 2: Configure Leaflet in project
We have set leaflet in our project, inside angular.json add the following:
Step 2: Set up the Template
We don’t need to test this app on a 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 app/tabs/tabs.page.html
We will rename the existing page to the new name, in the first two tab page we will display the different location and different design for each page and last page we will displaying multiple markers.
Step 3: Set up First Leaflet design
Add the following code in src/apps/tab1/tab1.page.html
Add the following code in apps/tab1/tab1.page.ts
Step 4: Set up Second Leaflet design
Add the following code in apps/tab2/tab2.page.html, we need to add different id for div containing a map, as ionic and angular are single page application.
Add the following code in apps/tab2/tab2.page.html
Step 5: Adding multiple markers in Leaflet Map
In tab1 and tab2 we display leaflet map with single maker. In tab3 we will add multiple leaflet marker in the Leaflet map.
Add following data on data.JSON in www/assets/data.json as
Add the following code in apps/tab3/tab3.page.ts
Add the following code in apps/tab3/tab3.page.html