react-azure-maps icon indicating copy to clipboard operation
react-azure-maps copied to clipboard

Targeting es5 causing issues when using types derived from EventEmitter

Open joebeernink opened this issue 3 years ago • 0 comments

ES5 Targeting in react-azure-maps causes an issue when you try to combine react-azure-maps with the HtmlMapLayer SDK available from Microsoft. (https://github.com/Azure-Samples/azure-maps-html-marker-layer)

In the Azure Maps SDK EventManager.Invoke method, the code appears as follows:

  public invoke(eventType: string, targetOrArgs: any, args?: any) {
    // If args is undefined assume there is not target for the event.
    if (typeof args === "undefined") {
      // Empty string indicates the map global level.
      this._invokeListeners(eventType, "", targetOrArgs);
    } else {
      if (targetOrArgs instanceof Layer && Layer._isMBoxEvent(eventType)) {
        this._invokeListeners(eventType, targetOrArgs.getId(), args);
      } else if **(targetOrArgs instanceof EventEmitter)** {
        targetOrArgs._invokeEvent(eventType, args);
      } else {
        throw new Error("The invoke target is invalid.");
      }
    }
  }

In the Azure-Maps-Html-Marker-Layer src/extentions/ExtendedHtmlMarker.ts file, the HtmlMarker is extended as follows: export interface ExtendedHtmlMarker extends azmaps.HtmlMarker {

Unfortunately, this results in the line (targetOrArgs instanceOf EventEmitter) behaving differently in ES5 than it does in ES6.

Under ES6, it behaves correctly, because the ES6 version of JS recognizes a derived class of a derived class of a base class as an instance of the base class... but ES5 instanceOf cannot do this, so in ES5, this check returns false, where in ES6, this returns true.

And since react-azure-maps includes the es5 minified version of the Azure Maps SDK, any app that uses react-azure-maps and wants to also use the HtmlMarkerLayer cannot.

joebeernink avatar Jun 05 '21 22:06 joebeernink