Angular Mapbox vs Angular Leaflet Mapbox vs Angular google maps

Question

I am pretty confused on which one to use. I am currently using angular mapbox --> http://inkblot.io/angular-mapbox , but the docs do not explain certain features I want like how to connect markers from an API call with lines and how to get the map to center on markers when its generated. Angular Mapbox made it great to use $scope to render data, but I am thinking of switching to something else in order to have those other features. Does anyone know a simple solution to have data rendered using ngrepeat with $scope, connecting those markers with lines, and having the map centered when those markers are generated?

Answer 1

Why not write your own simple directive which passes the map instance to your controller scope so you can take full advantage of the mapbox js api? The directives that are available for Angular, like the one you linked, angular-leaflet-directive and angular-google-maps are so bloated and complicated that you will end up with a slow app to start with. If you're only going show a couple of markers and polylines, it's sheer overkill and will bog you down like crazy. Plus the fact that these are in most cases poorly documented, updated and mostly incomplete (no full api coverage by far) it's in my opinion a bad choice. (with all due respect to the developers of these projects)

It can be as simple as this, the template:

<mapbox callback="callback"></mapbox>

For the directive:

angular.module('app').directive('mapbox', [
  function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        callback: "="
      },
      template: '<div></div>',
      link: function (scope, element, attributes) {
        L.mapbox.accessToken = 'YOUR PUBLIC MAPBOX KEY';
        var map = L.mapbox.map(element[0], 'YOUR MAP PROJECT ID');
        scope.callback(map);
      }
    };
  }
]);

Now use it in your controller:

angular.module('app').controller('rootController', [
  '$scope',
  function ($scope) {
    $scope.callback = function (map) {
      map.setView([51.433333, 5.483333], 12);
    };
  }
]);

The directive initializes the map, passes the map instance back to your controller scope and you're good to go and do whatever you like. I had a working example on Plunkr but Mapbox invalidated the example key and map. I've got a complete working example but it doesn't use Mapbox, it uses Leaflet, but the principle remains the same, you can test it here: http://plnkr.co/edit/gax5NL7DX2PWmJXKP9YD?p=preview

Found the mapbox example, keep in mind it doesn't load tiles because the tokens have expired or have been deleted: http://plnkr.co/edit/OpVhUKLryW8rbEtJ8jgh?p=preview