Leaflet Map Integration In The Ionic App

Introduction of leaflet map

Leaflet is a open source javascript library for mobile friendly interactive maps it has most mapping feature that developer had needed.
We can also use leaflet map in websites. Here I will show you how to develop ionic app with the integration of leaflet map. I have used leaflet map in ionic application for finding location, know nearby informations and using gps we find route and location.

Installing all the leaflet libraries using bower 

• Install map only: For installing map first you will update your bower and install leaflet libraries using below mentioned command

bower install leaflet

Note: Import three files leaflet css and js in your index.html file

<link rel="stylesheet" href="lib/leaflet/dist/leaflet.css" />
        <script src="lib/leaflet/dist/leaflet.js"></script>    
     <script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script> 

home.html 

<ion-content>
<leaflet width="100%" height="100%"></leaflet>
</ion-content>

Put the center point in your map using Latitude ,Longitude and Zoom.

home.controller.js

angular.extend ($scope,{
        ahmedabad:{
lat: 23.0225,
lng: 72.5714,
zoom: 8
}
});   

home.html

<ion-content>
<leaflet if-center="ahmedabad"  height="100%" width="100%"></leaflet>
</ion-content>

• For marker / custom marker: In map we can put simple marker with message and focus etc..

First we creating simple array for marker.

var mymarker={
		lat :23.02850605221088,
            lng: 72.55897879600525,
            focus : true,
            message: 'Addweb Solution Pvt. Ltd.'
	};
	angular.extend ($scope,{
	Ahmedabad:{
lat: 23.0225,
lng: 72.5714,
zoom: 8
},
markers : {
mymarker :angular.copy(mymarker)
}
});

home.html

<ion-content>
<leaflet if-center="ahmedabad"  markers="markers"
      height="100%" width="100%"></leaflet>
</ion-content>

Here, we put one object (markers) in the map and angular.extend  is extend the object in $scope and we use that object direct to the leaflet tag.

• Creating custom marker icon in Map

For Creating custom marker in leaflet map first we install Leaflet.MakiMarkers libraries using this command 

bower install Leaflet.MakiMarkers

index.html

<pre>
<code class="language-java">&lt;script src="lib/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"&gt;&lt;/script&gt;</code></pre>
 

Note: Put this file below the leaflet.js and also import angular-leaflet-directive.js 
    
home.controller.js

angular.extend ($scope,{
ahmedabad:{
lat: 23.0225,
lng: 72.5714,
zoom: 8
},
markers : {	
 		mymarker1={
			lat :23.02850605221090,
lng: 72.55897879600530,
focus : true,
message: 'Addweb Solution Pvt. Ltd.'
icon :{iconUrl: 'assets/images/map_marker1.png'}
		},
		mymarker2={
			lat :23.027479166986843,
lng: 72.55856037139893,
focus : true,
message: 'National HandLoom'
icon :{iconUrl: 'assets/images/map_marker2.png'}
		}
}
});

home.html

<ion-content>
<leaflet if-center="ahmedabad"  markers="markers" height="100%" width="100%"></leaflet>
</ion-content>

Note: In marker u will customize the marker size ,shadow ,shadow size,shadow anchor and popup anchor etc..

icon: {iconUrl: 'assets/images/map_marker.png',
    shadowUrl: 'assets/images/map_marker.png',
      iconSize:     [38, 95], 
      shadowSize:   [50, 64],
      iconAnchor:   [22, 94], 
      shadowAnchor: [4, 62],
      popupAnchor:  [-3, -76]
}

• For Label: For adding simple label with marker then you need to import label library using below mentioned command.

bower install Leaflet.label 

index.html

<link rel="stylesheet" href="lib/Leaflet.label/dist/leaflet.label.css"/> <script src="lib/Leaflet.label/dist/leaflet.label.js"></script>

home.controller.js

var mymarker={
	lat :23.02850605221088,
lng: 72.55897879600525,
focus : true,
label: {
	message: "Hey, drag me if you want",
options: { noHide: true }
}
};
angular.extend ($scope,{
Ahmedabad:{
lat: 23.0225,
lng: 72.5714,
zoom: 8
},
markers : {
	mymarker :angular.copy(mymarker)
}
});

home.html

<ion-content>
<leaflet if-center="ahmedabad"  markers="markers" height="100%" width="100%"></leaflet>
</ion-content>