Drawing Toolbar events do not fire

[FarReachTravis]

I have a simple proof-of-concept project setup to test drawing on a map with the ultimate goal of using data points from the drawing to filter markers that I'll draw on the map. The map draws, with the three 'shapes'/markers, and drawing on the map works, but none of the events on the drawing toolbar fire. My component's .ts file looks like this:

import { Component } from '@angular/core'; import * as atlas from 'azure-maps-control';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-azure-maps';

public dataSource: atlas.source.DataSource; public strokeColor = '#4288f7'; public strokeWidth = 1; public radius = 7; public color = "DodgerBlue"; public center = [-92.0076434351666, 42.31463750062173]; public zoom = 6; public mapStyle = 'grayscale_light';

mapReady() { this.dataSource = new atlas.source.DataSource('source'); const point1 = new atlas.Shape(new atlas.data.Point([-92.0076434351666, 42.31463750062173])); this.dataSource.add([point1]); const point2 = new atlas.Shape(new atlas.data.Point([-92.76434351666, 42.463750062173])); this.dataSource.add([point2]); const point3 = new atlas.Shape(new atlas.data.Point([-92.25436, 42.4773])); this.dataSource.add([point3]); }

drawingStarted(value: any) { } drawingChanged(value: any) { } drawingChanging(value: any) { } drawingComplete(value: any) { } drawingModeChanged(value: any) { } }

while the relevant part of the html file looks like this: <azure-map style="width: 900px; height: 300px;" [mapStyle]="mapStyle" [zoom]="zoom" [center]="center" [dataSources]="[dataSource]" (onReady)="mapReady()">

  <map-drawing-toolbar drawingStarted="drawingStarted($event)"
                       drawingChanged="drawingChanged($event)"
                       drawingChanging="drawingChanging($event)"
                       drawingComplete="drawingComplete($event)"
                       drawingModeChanged="drawingModeChanged($event)"></map-drawing-toolbar>
  <map-bubble-layer dataSourceId="source" [strokeColor]="strokeColor" [strokeWidth]="strokeWidth" [color]="color" [radius]="radius"></map-bubble-layer>
</azure-map>

[arnaudleclerc]

Hi. I'll try to take a look at it in the next couple of days. Do you have by any chance a repo where I could reproduce the issue?

[FarReachTravis]

Please see this repo: https://github.com/FarReachTravis/ng-azure-maps-drawing-tools-bug you'll just need to run yarn, and add an azure maps product key to the environment.ts file.

thanks!

[arnaudleclerc]

Thanks, I could reproduce it easilly! It looks like the library is trying to remove the datasources added by the drawing toolbar when the onReady event is triggered. I will exclude those layers from this process. I will let you know whenever this is fixed

[arnaudleclerc]

This should now be fixed on the version 4.0.1.

This was not the reason why you did not see any event though. They are actually firing correctly, you simply forgot the parentheses around the event emitter :

<map-drawing-toolbar drawingStarted="drawingStarted($event)" drawingChanged="drawingChanged($event)"
        drawingChanging="drawingChanging($event)" drawingComplete="drawingComplete($event)"
        drawingModeChanged="drawingModeChanged($event)"></map-drawing-toolbar>

The following should be fine :

<map-drawing-toolbar (drawingStarted)="drawingStarted($event)" (drawingChanged)="drawingChanged($event)"
        (drawingChanging)="drawingChanging($event)" (drawingComplete)="drawingComplete($event)"
        (drawingModeChanged)="drawingModeChanged($event)"></map-drawing-toolbar>

Still, the error was noisy and should now be fixed 😊. Feel free to reopen the issue if necessary

[FarReachTravis]

Great! Thanks!