AngularJS & Leaflet directive: how to allow user to resize the map

I was recently working with Leaflet and Angular. While Leaflet? just to avoid (again and again) Google Maps.

I do recommend Leaftet directive for Angular. Very efficient, quite powerful. However, it lacks one feature : redim the height of its map dynamically, and thus, save it to the local storage.

So I have written a very small and efficient directive on top of leaflet directive for Angular that could be found here.

To use it, add the script after leaflet ones

<script src="angular-leaflet-directive-mapresize.js"></script>

and add the “dragmap” directive to leaflet’one:

<leaflet width='100%' height='600' defaults="defaults" dragmap></leaflet>

It adds a very basic div below the map that could be use to resize the height of the map.
The most important lines into the module’s code are the following:

   controller.getMap().then(function(map) {
     map.invalidateSize();
   });

It forces leaflet to recalculate the size of the div and avoids some gray tiles.

UI-Grid v3 : Custom Cell Renderer

I was recently playing with Angular-UI’s ui-grid v3 module and I was wondering how to define custom cell renderer; especially for address rendering. The tutorial explains that, basically, you need to define a function for each data in your dataset. For example, here, we got a function just for the Zip

var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {
 
$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
}]);

It works, but not really efficient on large dataset. The solution comes from “Cell Template” and direct binding to the current row entity

   columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', cellTemplate: '{{row.entity.address.zip}}'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };

Thus, you can build really complex columns for example with multiple buttons and so on. For my address issue, I did 2 things
1) I create a new angular’filter called ‘addrshort” :

app.filter('addrshort', function() {
  return function(address) {
    return address.join(" ");
  }
});

2) I change the cell template to:

cellTemplate: {{row.entity.address|addrshort}}

BUT there is one limitation : default filtering doesn’t work