Leaflet Map Integration In The Ionic App

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 information 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” />         http://lib/leaflet/dist/leaflet.js          http://lib/angular-leaflet-directive/dist/angular-leaflet-directive.js

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

http://lib/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js http://lib/angular-leaflet-directive/dist/angular-leaflet-directive.js

Note: Put this file below the leaflet.js and also import angular-leaflet-directive.js
Read more… https://goo.gl/7nrcu2
  

Hope this blog helps you and would help to resolve any leaflet map integration in Ionic Application. Share you views and feedback 🙂 . To be the Part of the family as Ionic Developer visit Hire Ionic developer .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s