

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
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>
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.
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"><script src="lib/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
<script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script></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]
}
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>
Hope this blog helps you and would help to resolve any leaflet map integration in Ionic Application. Share you views and feedbacks :) . To be the Part of the family as Ionic Developer visit Hire Ionic developer .