Incorrect name binding issue with Angular-CLI / Webpack

[Tenmak]

Incorrect name binding issue with Angular-CLI / Webpack

[Tenmak]

So, I've been testing around, also with the links you mentionned previously, and I think I got the best solution to this issue.

---

First of all, your fix on the branch typescript-compat does not work. I tried doing the same (from the same SO link : https://stackoverflow.com/a/44141760), but in the end the main issue is that it breaks at compilation time because of the type definitions from leaflet.

import * as L from 'leaflet';

Also, I actually had the same issue from leaflet-draw, but in the end I found an alternative that allows to do things pretty easily without having to do an @types library just to have the compatibility with the leaflet types (and thus no need to update this library either) :

The thing is to declare and use a variable that would allow us to use the leaflet core files (and not the whole leaflet type definitions) so that you can make files that will use only the wanted library such as leaflet-draw or leaflet-zoombox without breaking at compilation time or at runtime.

---

Here is a working example that imo would be the best practice case :

tools.conf.ts

// import * as L from 'leaflet';   --> This would make a compilation error
declare const L: any;                // use this to declare an untyped leaflet namespace
import 'leaflet-draw/dist/leaflet.draw-src';  // import the leaflet-draw JS library

export function drawPlugin(map: any) {
  const drawnItems = L.featureGroup().addTo(map);

  const drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems,
    },
    draw: {
      polygon: false,
      polyline: false,
      marker: false,
      circlemarker: false
    }
  });
  map.addControl(drawControl);

  map.on(L.Draw.Event.CREATED, (event) => {
    const layer = event.layer;

    drawnItems.addLayer(layer);
  });
}

Same example with leaflet-zoombox :

zoombox.conf.ts

// import * as L from 'leaflet';  
declare const L: any;
import 'leaflet-zoombox';  // Import the leaflet-zoombox library

/**
 * Initialize the Zoombox Leaflet Control
 * @param {L.Map} map
 */
export function initZoomBox(map) {
  const control = L.control.zoomBox({ modal: false });
  map.addControl(control);
}

And use the exported functions in your angular / front-end framework component :

leaflet-map.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

// Import Leaflet library AND types
import * as L from 'leaflet';
// Import leaflet overlays
import { getBaseLayers, getOverlays } from './conf/layers.conf'; 
// Import exported function using leaflet-draw
import { drawPlugin } from './conf/tools.conf';
// Import exported function using leaflet-zoombox
import { initZoomBox } from './conf/zoombox.conf';                   

@Component({
  selector: 'leaflet-map',
  templateUrl: './leaflet-map.component.html',
  styleUrls: ['./leaflet-map.component.scss']
})
export class LeafletMapComponent implements OnInit {
  @ViewChild('map') mapEl: ElementRef;

  constructor(
  ) { }

  ngOnInit() {
    const map = this.initMap();
    // ZoomBox Control
    initZoomBox(map);
    // Leaflet-Draw Toolbar
    drawPlugin(map);
  }

  initMap() {
    const baseLayers = getBaseLayers();
    const overlays = getOverlays();

    const map = L.map(this.mapEl.nativeElement, {
      center: [51.505, -0.09],
      zoom: 13,
      layers: [baseLayers['Standard'], overlays['Cities']]
    });

    L.control.layers(baseLayers, overlays).addTo(map);
    return map
  }
}

Thanks for taking your time looking into this issue. Without your help I wouldn't have found this and probably would have broken your Leaflet plugin naming convention

[brendan-ward]

@Tenmak thanks for letting us know about this. I'm not an Angular user, so this is not something I've bumped into.

We followed the standard Leaflet conventions for naming plugins. Have you encountered this issue with other leaflet plugins?

I don't understand the issue with types. Is there a reference page in Angular's documentation that you could point me to? Or is this from using TypeScript?

[brendan-ward]

@Tenmak it looks like you can handle the wrapping for types like this example: https://haoliangyu.github.io/2017/01/25/Using-an-untyped-Leaflet-plugin-in-your-TypeSccript-project/

or like the solution here: https://stackoverflow.com/a/44141760

Since this was not authored as a TypeScript project, I'd prefer to stick to using the Leaflet conventions for naming the plugin.

[brendan-ward]

@Tenmak I take that back, I'm willing to try this if it is as easy as dropping in the typescript mappings file.

Can you please test the branch typescript-compat in this repo? I added the TypeScript declarations, but I'm not setup to test using TypesScript, so I need some assistance there.

[Tenmak]

@brendan-ward

Have you encountered this issue with other leaflet plugins ?

• Not really, I've only been using leaflet 1.2.0 and leaflet-draw 0.4.12.
  EDIT : Since leaflet-draw only extends some leaflet classes, I haven't seen any other issues yet.. The same issue happens.

Can you please test the branch typescript-compat in this repo ?

• Sure, I'll take a look into it .

[tuckergordon]

As a follow-up to @Tenmak 's solution, I found that I also had to add import 'leaflet' to get the code to compile correctly:
my-angular-component.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare const L: any;
import 'leaflet';
import 'leaflet-zoombox';
...

The alternative is just to add // @ts-ignore above the L.control.zoomBox(..) call but that seems like bad practice..