Getting MEAN with Leaflet Markers

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 =;
           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

Add new comment

By submitting this form, you accept the Mollom privacy policy.