AngularJS Leaflet getMap() doesn't work

Question

After adding Leaflet to my AngularJS app:

<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet>

And setting it up:

// Initialise the feature group to store editable layers
var drawnItems = new L.FeatureGroup();

// Initialise the draw control
var drawControl = new L.Control.Draw({
    position: 'topright',
    edit: {
        featureGroup: drawnItems
    }
});

// Configure Leaflet
angular.extend($scope, {
    defaults: {
        zoomControlPosition: 'topright',
        minZoom: 3,
        tileLayerOptions: {
            detectRetina: true,
            reuseTiles: true,
            attribution: '<a href="http://osm.org">OpenStreetMaps</a>'
        }
    },
    center: {},
    controls: {
        custom: [drawControl]
    },
    events: {
        map: {
            enable: ['click']
        }
    }
});

Following this code it doesn't get evaluated (no error shown though):

leafletData.getMap().then(
    function (map) {
        alert('I have accessed the map.');
    }
);

This should show me an alert straight away, although nothing happens.

If I delay this previous code, for example, running it in a function on a button click, it works!

Does anyone knows what could be a problem?

Seeing example, it should work: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html

PARTLY SOLVED

Removing ID from leaflet HTML tag solved the problem. Must be a bug.

Answer 1

You are supposed to pass the id specified in the <leaflet> tag to getMap() function.

In your example, the id is map. You would pass it like this:

leafletData.getMap("map").then(
    function (map) {
        alert('I have accessed the map.');
    }
);