Tech Blog

Simply add a Google Map to the Item View in Primo new UI

At the University of Nice (France) we are testing the Primo New UI, and will probably use in production this little custom module we develop.

First we need to install the ngmap package (Google map directives for Angular) : npm install ngmap –save
And import it in your main js (we use browserify to compile) : import ‘ngmap’;
The custom module simply add a Google map to the prmLocationItemsAfter Directives in the items’s views, with a marker corresponding to the Library who owns the item. To get the differents libraries locations we consume Jsonp data from an API of another internal application but you can use a call to a static json file.
The datas look like : [{“code_bib_aleph”:”<the_aleph_library_code>”,”latitude”:”…”,”longitude”:”…”},{…},{…},…]
and here is the code
angular.module('customItemsMap', []).controller('customItemsMapController', ['$scope','$http', "NgMap", function ($scope, $http, NgMap) {
     this.$onInit = function () {
        var currentBib =        this.parentCtrl.loc.location.libraryCode;
        $http.jsonp("", {jsonpCallbackParam: 'callback'})
        $scope.bus =;
        $scope.selectedBu = $scope.bus.filter(function (site) {
    return (site.code_bib_aleph == currentBib);
  }]).component('prmLocationItemsAfter', {
          bindings: {parentCtrl: '<'},
    controller: 'customItemsMapController',
    template: "<div map-lazy-load='<your_googlemap_api_key>'><ng-map zoom='10' center='[43.717392, 7.266265]'><marker position='[selectedBu[0].latitude, selectedBu[0].longitude]'  title=''></marker></ng-map></div>"
Possibles customizations are a few : add content to the marker tile (library hours for examples), use the Google directions API and the ngMap directions directives to display the route between the current position of the user and the displayed library , and so one…

Leave a Reply