- Add simple Leaflet Map
- Add Leaflet Markers, Popup and Circle
The final preview of our app would look like following
(Click to load, size 259kb)
A marker on a map is simply a draggable and clickable icon on the map. Leaflet location marker API makes it really easy to add a marker to our map. All we have to do is to provide geographical point (latlng) along with options object. So let’s see it in the implementation.
So I will be using code of previous article as base and build on top it. If we preview our app now. We will be staring at blank map with no interaction. So first thing we can do is add the home marker. So let’s write some code
Right at the bottom of ngOnInit function we will call another function that would contain the home marker logic.
On line 12 we are calling the method. The first line of
addHomeMarker uses Marker method of leaflet, which accepts geo points and options object. Then the popup is bound which means it will appear on clicking the marker. Finally the homeMarker is to added to our map.
This API that add popup to leaflet markers is quite simple. All we have to do is to provide string as first argument followed by configuration object.
If you don’t see any marker, the reason might be failing to load the images. You could see the errors in the browser console. The temporary solution is to import the image paths at top of the file like below
We will later discuss the permanent solution.
Drawing circle in our map are helpful when we need to show information in a bounding box. For example the Router disperses signal in in circular form. The distance is measured in radius. That’s why leaflet circle is our best bet. For that same reason it accepts radius in meters
So let’s update our code with the code of circle.
After adding all this code, let’s see how our preview looks like
Add Marker with click handler
Let’s do a little more experimental with locations markers. By making it draggable and animate it with bounce drop effect. Let’s write some HTML for the button where we can click on.
<ion-header [translucent]="true"> <ion-toolbar> <ion-title> Tab 1 </ion-title> <ion-buttons slot="end"> <ion-button (click)="addMarker()"> <ion-icon slot="icon-only" name="add"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-header>
We are calling addMarker function that adds the location marker at the center. In order to add the bounce effect we need to install plugin.
Animating Leaflet Markers
Leaflet has good lot of plugins that helps us in extending the leaflet. One such plugin is leaflet.bouncemaker. So let’s install it
npm install https://github.com/maximeh/leaflet.bouncemarker
We have modified our code with one such property
bounceOnAdd. We can also provide more options to this plugin. Such as increasing the rate, frequency as well as providing callback function.
We have just scratched the surface as far as Leaflet Marker API is concerned. There is a lot more to it according to documentation. For instance on drag finish of location marker we can get the geo points of new location. Same true for leaflet circle and leaflet popup.