Saturday, 14 January 2017

A leaflet template for ionic

Leaflet is a very useful javascript library to insert map into an app. It has lots of extensions, which simplify it's use. I use it mainly in ionic's app, so I have created a repo on GitHub as a start point. It's extends the side menu template with leaflet.

The key points are:
  1. Get a GeoJson through an api call (markersApi.js)
  2. Create a map (with OSM as baselayer).
  3. Add the GeoJson to the map (using the marker-cluster library).
  4. Add a marker on tap.

Add the map to the html

To add leaflet map in ionic (and angular) there is a directive to simplify it: angular-leaflet-directive (or you can use ui-leaflet). In the html you can just put:

<leaflet data-tap-disabled="true" defaults="map.defaults" id="map" layers="map.layers" lf-center=""></leaflet>

And after you have incluse in the app's model dependencies, the angular-leaflet directive, and have defined an object in the controller as $ which contains the center point when load the map, the layer to load and some optional parameter you can see the map.
//set the property of the map
$ = {
             center: {
                lat: 46,
                lng: 11,
                zoom: 8
             defaults: {
                zoomControl: false,
                attributionControl: true
             layers: {
                baselayers: {
                    xyz: {
                        name: 'OpenStreetMap (XYZ)',
                        url: 'http://{s}{z}/{x}/{y}.png',
                        type: 'xyz',
                        zoomControl: false,
                        layerOptions: {
                            attribution: '© OpenStreetMap contributors'

You also can center the map to the actual position:
var options = {enableHighAccuracy: false,timeout: 20000};

//center the map on the actual position.

var setCurrentPosition = function () {
   template: '',
   duration: 7000
   $cordovaGeolocation.getCurrentPosition(options).then(function (position) {
      if (position) {
         $ = position.coords.latitude;
         $ = position.coords.longitude;
         } else {}
       }).catch(function (err) {}).finally(function () {

Add markers to the marker

The markers are in a GeoJson format, so they are among throughout the L.GeoJSON layer:
//create a marker cluster layer
var markers = L.markerClusterGroup();

*When the view enter:
* get the map.
* get the markers form the api.
* create the geojson layer
* add the geojson layer to the marker cluster layer
* add the marker cluster layer to the map
$scope.$on("$ionicView.enter", function (scopes, states) {
   leafletData.getMap("map").then(function (map) {
   markersApi.getPoints().then(function (resp) {
      var geojson = new L.GeoJSON(resp, {
         onEachFeature: function (feature, layer) {
            //open a ionic modal on click 
            layer.on('click', function (e) {
            $ = feature.geometry.coordinates[1];
            $ = feature.geometry.coordinates[0];
            $scope.feature = feature;
}, function (err) {
      console.log('ERROR', err.status);

Add a marker on tap

To add a marker on tap,  you can add this code:

var setMarker = function (latlng) {
   if (!newMarker) {
     newMarker = new L.marker(latlng).addTo(map);
   } else {
var newMarker = null;
map.on('click', function (e) {

the repo is available on GitHub at this link.

NOTE: angular-leaflet use leaflet at version 0.7.7 so the marker-cluster is the old version as you can see in the bower.json file.

No comments:

Post a Comment