error while drawing shape in bing map using angular

[vivek-vekariya]

I am using following code for getting map layer and drawing tools but it throw an error

while run the project debugger not hit and variables becomes empty and that cause an error in my project and not work properly, any solution for that?

Microsoft.Maps.loadModule(['Microsoft.Maps.DrawingTools', 'Microsoft.Maps.SpatialMath'], function () {
    this.drawingLayer = new Microsoft.Maps.Layer();
    debugger;
    this.map.layers.insert(this.drawingLayer);
    debugger;
    this.tools = new Microsoft.Maps.DrawingTools(this.map);
    debugger;
    this.toolsPolyline = new Microsoft.Maps.DrawingTools(this.map);
  });

[drwestco]

Can you post a self-contained sample to jsbin or similar to demonstrate the issue?

[vivek-vekariya]

I added my typescript code in jsbin please find from following link

https://jsbin.com/fesoceq/edit?html,css,js,console,output

[drwestco]

Sample doesn't load.

ReferenceError: require is not defined
    at fesoceq.js:12:14

[drwestco]

Given the error in your original screenshot - Cannot read properties of undefined (reading 'create'), I'm guessing this is thrown from within your drawSearchArea method, due to this.tools still being null|undefined? Microsoft.Maps.loadModule is an async method. So if GetMap and drawSearchArea are called in sequence, there's no opportunity for the drawing tools to be created. You need to wait for loadModule to complete (e.g., check that this.tools has been set before accessing it).

[vivek-vekariya]

yes, exactly this.tools is null but the GetMap method i am calling on ngOnInit() and drawSearchArea() call on button click so that methods are not call in sequence.

when i call getMap() on ngOnInit() drawing tools should be set but it still remains null can you please give me solution for that

[drwestco]

You have debugger statements in the loadModule callback - are those being hit?

[vivek-vekariya]

No, that's why this.tools is null. But i can not figurout why debugger are not hit on single statement

[drwestco]

You sure your getmap function is being hit and your call to loadModule is being run? Also, the callback passed to loadModule should be an arrow function to capture this. Wouldn't explain why the debugger statements aren't working though..

[vivek-vekariya]

This code shows no defination found for polyline can you help me

 this.toolsPolyline.create(Microsoft.Maps.DrawingTools.ShapeType.polyline, function (s) {
      this.polyline = s;
    });

[drwestco]

On which line? You have a polyline property in two locations in your snippet. I'm guessing it's the second one? What is this referring to? As before, you should probably be using an arrow function for the callback to capture this.

[drwestco]

@vivek-vekariya did this resolve your issue?