Reuse existing map instance for Leaflet directive

Question

I'm trying to add the Leaflet Editable functionality to my current map which map is created by the leaflet directive. I'm getting the L.map instance with:

leafletData.getMap().then(function(map) {
  // where map is the Leaflet map instance
}

However the Leaflet editable needs to set editable: true when the map is created.

So, is there a way to create a L.map instance

var map = L.map('map', {editable: true});

and then attach it to the Leaflet angular directive?

UPDATE:

I tried to add a hook to Leaflet

L.Map.addInitHook(function () {
  this.whenReady(function () {
    this.editTools = new L.Editable(this, this.options.editOptions);
    console.log('L.map', this);
  });
}

It creates the editTools successfully but the

map.editTools.startPolyline();

is still not working

score 0 · Answer 1 · answered Oct 05 '15 at 14:55

0

Did you try adding editable: true to your defaults?

angular.extend($scope, {
    defaults: {
        editable: true
    },
    center: {
        lat: 51.505,
        lng: -0.09,
        zoom: 8
    }
});

<leaflet defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>

answered Oct 05 '15 at 14:55

iH8

27,722
4
67
76

You can verify if it's really set by checking the options object of your map instance: `console.log(map.options.editable);` – iH8 Oct 05 '15 at 15:17
adding the editable property to the defaults is not working at all. I've updated the question with my last attempt – Lt. Oct 05 '15 at 15:48

score 0 · Answer 2 · answered Apr 06 '16 at 07:38

0

For anyone looking like me to make an existing map editable

var map = L.map('map', {editable: true});

is the same as

var map = L.map('map');
map.editTools = new L.Editable(map);

answered Apr 06 '16 at 07:38

Axi

1,534
15
20

Reuse existing map instance for Leaflet directive

2 Answers2