Hi Friends,

Hope you are all well. In this post let’s see how to add multiple markers on your leaflet maps. We’ll also see how to store the  markers on firestore, retrieve and populate them on the maps as well.

Let’s begin.

A screencast of this post

For the code please refer to part 2 of this post. Thanks.

I assume you have already read my previous post on bringing in leaflet maps into  your ionic apps. If not kindly read it once here.

I’ll quickly run through the steps.

Scaffold out a blank ionic application and install leaflet on it using the below command.

Once this is installed open index.html and add the below line of code.

Now open up home.html and add the below code.

(Replace the <ion-content> block with this one).

Now open up home.ts file and add the below code.

This will add a map to your home.html and if you run it you could see the map as well.

Alright, now that we have brought a map into our screen, let’s actually write code to add markers on specific locations on this map and display them as well.

To do this, let’s first add a button to our navbar that will help us add our marker.

Open up home.html and add some code. Your home.html should look like this now.

This will add a button to the end of the navbar.

Let’s go ahead and add some functionality to this button by adding some code in home.ts

Open up home.ts and add the below code to bring in a prompt dialog.

The above code is pretty much self-explanatory. We have also discussed dialogs in detail in several of our previous posts on Ionic 3. This just opens up a prompt dialog(as shown below) wherein we can type in our location. This location is sent to a geoCodeandAdd() method when the save button is tapped.

Okay.. Now we have some components that enable us to enter a location. We need to obtain coordinates for this location now. To do that we need to do forward geocoding.

Forward Geocoding is the technique of obtaining latitude, longitude coordinates of any location whereas reverse is the vice versa (duh !).

To do so let’s install a native plugin called Native-Geocoder. To install it give the below commands one by one.

Then install the wrapper.

Okay. Cool. Let’s make use of this now in our code.

Open up home.ts and modify it as shown below.

Wow; that’s plenty of code.

You could see that in the geoCodeandAdd() function we are simply running a forwardGeocode method (which is present in the nativeGeocoder plugin) on the entered city. Then we are making use of the coordinates returned to create a marker. This marker is then placed on a feature layer which is then added to the map. That’s it. Simple right ?

Now run the.. Wait.. open up app.module.ts and add imports for the native-geocoder plugin.

Now run the app. You should be able to add markers on the map as shown below.

Add a few more markers and you would be able to see them all on your map now.

Phew, Now let’s see how to save these markers onto firestore.

Or, maybe we could move that into part 2 of this post; else your scrollbar will be much more smaller than what it is right now.

If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace..