Getting MEAN with Leaflet Markers

By peterm, 23 January, 2015

Over the past week, in between meetings, I've gotten some additional functionality added. I've been able to enter a number of Leaflet nodes (records) and then display markers on the "list" view. I've created a link in the popup that then takes us to the detail record. I've also been taking Dan Whalin's Udemy course. His site has a 50% off coupon code.

What that gives us is a way to execute queries and process the result set using the Leaflets.query() pattern in the client controller to show a map with markers representing the "category" of the search. In my case that might be libraries, restrooms, parking, facilities, departments, etc.

We also have the ability to search and return a single record based on the findOne() pattern.

Next will be further refinements to the data model. I found some Mongo/GIS articles that I'll be using.

Here's some working code that needs to be optimized but would give you the idea.

// Find a list of Leaflets

$scope.find = function() {

 $scope.leaflets = Leaflets.query();

 var messages = Leaflets.query(function(){

 $scope.markers = {};

      angular.forEach(messages, function(obj, key){

           var toProcess = obj.coordinates[0];

           var title = obj.name;

           var values = toProcess.split(',');

           var ucsclng = parseFloat(values[1]);

           var ucsclat = parseFloat(values[0]);

           // Create a link in popup to detail view of record

           var html = '<a href="#!/leaflets/' + obj._id + '">' + title + '</a>';

           

           // create an array of markers as we loop through query results

           $scope.markers[obj._id] = {

                'lat': ucsclat,

                'lng': ucsclng,

                'zoom': 15,

                'message': html,

                'draggable': false

           };

      }); // end angular.forEach()

 }); // end var messages

      

      // set the default center and zoom for the list view

      // note this requires the directive to use < center="ucsc" />

      angular.extend($scope, {

           ucsc: {

                lat: 37.0000,

                lng: -121.9999,

                zoom: 12

           }

      });

}; // end find list of leaflets