angular leaflet js using the leaflet plugins and more

Question

I am using leaflet and angularJS and therefore the angular-directive for leaflet. I now want to use custom markers. For example these boat markers: https://github.com/thomasbrueggemann/leaflet.boatmarker . Or for example for the 'leaflet sliders' (https://github.com/dwilhelm89/LeafletSlider) I need to use addControl or L.geoJson().

My problem now is, as i use the angular directive, I do not have this 'L' notation and do not have a real 'map' object in my controller. I seriously don't know how to use any leaflet plugin as the directive seems so limiting. Anyone knows a good way to use leaflet stuff life 'addTo(map)' in the angular directive?

Answer 1

After you've loaded the Leaflet javascript asset, you always have access to the L object, since it's attached to the global scope. Just try console.log(L); in your controller and you'll see. If you want access to the L.Map instance created by the directive you can inject leafletData into your controller. It contains a getMap method that returns a promise, that when resolved returns the map instance:

angular.module('myApp').controller('myController', [
             'leafletData',
    function (leafletData) {
        leafletData.getMap().then(function(map) {
            new L.Marker([0,0]).addTo(map);
        });
    }
]);