1

First off, I'm trying to create something like this using Angular.js: https://foursquare.com/explore?mode=url&near=San%20Francisco%2C%20CA&q=comedy

In summary, here are the tools I've tried:

  • Mapbox.js
  • Leaflet.js
  • Angular-Leaflet directive

For each, I've attempted to create a directive that would manage a list of locations that is associated with a map displaying those locations such that, when the user hovers over a list item, a tooltip appears above the location's marker on the map, and when they hover atop the location's marker on the map, a tooltip appears above that marker. (If this isn't clear, just visit the link above.) Hyperlinks, image, etc. should be able to appear within the tooltip. None of the above seem to give me the map portion of this functionality straight out of the box. Also, in order to even get markers to appear on the map, I have to essentially break away from idiomatic Angular, since the markers are vector items that are generated via the Leaflet/Mapbox toolkit. Writing this code feels wrong. Yes, I'm able to see the marker, but I can't really associate them with anything in the DOM. I'm confused.

I'm just at a loss for how to create a smart, interactive map that is associated with other elements on my page. Libraries like Angular-leaflet allow you to get a map on your page pretty easily, but customization is PAINFUL (or so it seems). Is Angular.js, in combination with any of the above three tools, the way to go? Is there something I'm simply failing to understand?

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Michael P.
  • 1,373
  • 3
  • 12
  • 33
  • Yeah I have worked with AngularJS and Leaflet-Directive too, it can be a bit of a pain sometimes. There is no built in way to do this. There are a few threads on SO dealing with similar topics [here](http://stackoverflow.com/questions/13004226/how-to-interact-with-leaflet-marker-layer-from-outside-the-map) and [here](http://stackoverflow.com/questions/9912145/leaflet-how-to-find-existing-markers-and-delete-markers). What they are essentially doing is building an index array that allows you to map the map markers to a number with an array. – chrki Apr 12 '15 at 22:04
  • I'm almost wondering whether I should even bother with Angular for what I'm attempting to do. There seems to be no intelligent way to bridge the gap between Angular and Leaflet, and that directive's source code is supremely convoluted. – Michael P. Apr 12 '15 at 22:08
  • It should not be too bad. Have you tried pushing all the markers into an Array before you add them to a LayerGroup. While they are in the Array you have a nifty reference to them so you can call methods like show popup and whatnot. – Cory Silva Apr 24 '15 at 04:59
  • [As for the hovering try this](https://gist.github.com/coryasilva/bb3a22e7db87e1438950). If you are interested I can dig up a leaflet-directive I made and we can compare notes. – Cory Silva Apr 24 '15 at 05:05

1 Answers1

0

in angular-leaflet-directive, you can bind marker events. here is an example that implements the dragend event (taken from here). you should be able to use the mouseover event, get the hovered marker from the events arguments and show it's popup.

var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MarkersSimpleController', [ '$scope', function($scope) {
  var mainMarker = {
    lat: 51,
    lng: 0,
    focus: true,
    message: "Hey, drag me if you want",
      draggable: true
  };

  angular.extend($scope, {
    london: {
      lat: 51.505,
      lng: -0.09,
      zoom: 8
    },
    markers: {
      mainMarker: angular.copy(mainMarker)
    },
    position: {
      lat: 51,
      lng: 0
    },
    events: {
      markers: [ 'dragend' ]
    }
  });

  $scope.$on("leafletDirectiveMarker.dragend", function(event, args){
    $scope.position.lat = args.model.lat;
    $scope.position.lng = args.model.lng;
  });

} ]);
Hinrich
  • 13,485
  • 7
  • 43
  • 66
  • I'm curious--why do you use angular.extend($scope ...); rather than just assign values directly to $scope? – Michael P. Apr 23 '15 at 15:22
  • 1
    @Michel P.: I didn't know either, so I [asked](http://stackoverflow.com/questions/29834354/extending-scope-in-angular-js?noredirect=1#comment47797058_29834354). Seems not to make any difference normally, though in angular-leaflet, it seems like it actually could. Not sure – Hinrich Apr 23 '15 at 22:50