Use Leaflet Draw plugin in Angular 7 TypeScript Component's Toolbar

Question

I am trying to use the Leaflet.Illustrate in my Angular 7 project. I have tried to load it in the HTML, but, even if it does load, it's not apparent how to call the

new L.Illustrate.Control({
    edit: { featureGroup: drawnItems }
}).addTo(map);

to add it to the existing call to build the toolbar I have:

addDraw() {
    if (this.map !== undefined) {
          const leaflet = this.map.leafletMap();
          leaflet.setZoom(3);

          const drawnItems = new L.FeatureGroup();
          leaflet.addLayer(drawnItems);

          const drawControl = new L.Control.Draw({
            position: 'bottomright',
            draw: {
              polygon: {
                allowIntersection: false,
                showArea: true
              }
            },
            edit: {
              featureGroup: drawnItems
            }
          });

          leaflet.addControl(drawControl);

          leaflet.on(L.Draw.Event.CREATED, function (event: any) {
            drawnItems.addLayer(event.layer);
          });
        }
}

I have looked for an @types/leaflet-illustrate, without luck, and I was even going to try and write an index.d.ts to cover the JavaScript library. Has anyone else had luck getting this going, or a good way to find out how to write the index.d.ts?

Answer 1

The plugin does not seem to support leaflet version later than 1.0.0 and leaflet-draw version later that 0.2.x

Therefore to be able to use it you need to use old versions of leaflet and leaflet-draw and more specifically leaflet 0.7.x

Install leaflet 0.7.2, leaflet-draw 0.2.4 & leaflet-illustrate 0.0.3

Import css files in angular.json as follows:

"styles": [
     "../node_modules/leaflet/dist/leaflet.css",
     "../node_modules/leaflet-draw/dist/leaflet.draw.css",
     "../node_modules/leaflet-illustrate/dist/Leaflet.Illustrate.css",
     "styles.css"
],
...

Inside .ts place the following code:

ngOnInit() {
    var map = L.map("map").setView([41.7896, -87.5996], 15);
    L.tileLayer("http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg", {
      attribution:
        'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
    }).addTo(map);

    map.on("click", function(evt) {
      console.log(evt);
    });

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var illustrateControl = new L.Illustrate.Control({
      edit: {
        featureGroup: drawnItems
      }
    });
    map.addControl(illustrateControl);

    drawnItems.addLayer(
      new L.Illustrate.Pointer(L.latLng(41.7868010411136, -87.60601043701172), [
        new L.Point(0, 0),
        new L.Point(100, -100),
        new L.Point(400, -100)
      ])
    );
    drawnItems.addLayer(
      new L.Illustrate.Pointer(
        L.latLng(41.80219068741082, -87.60648250579834),
        [new L.Point(0, 0), new L.Point(100, -100), new L.Point(400, -100)]
      )
    );

    map.on("draw:created", function(evt) {
      var type = evt.layerType,
        layer = evt.layer;

      drawnItems.addLayer(layer);
    });
}

Demo