Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot read property #23

Closed
drewteachout opened this issue Nov 7, 2017 · 9 comments
Closed

Cannot read property #23

drewteachout opened this issue Nov 7, 2017 · 9 comments

Comments

@drewteachout
Copy link

I am trying to use the SpatialMath class of the Bing Maps API, but when I try and use it below I am getting this error. "Uncaught TypeError: Cannot read propert of 'getHeading' of undefined.

`locs = this.generatePolylinePointsWithArrow(locs, numArrows, arrowLength);

// Finds the heading for the arrow that will be added at the center of the line
var midIdx = Math.floor(locs.length / 2);
var heading: any;
setTimeout(() => {
  
}, 2000)

heading = Microsoft.Maps.SpatialMath.getHeading(locs[midIdx], locs[midIdx + 1]);

// Create the arrow pushpin
var arrowPin = new Microsoft.Maps.Pushpin(locs[midIdx + 1], {
  icon: '<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"><path d="M10.5 31 L16 16 21.5 31" style="stroke:#FFB500;stroke-width:2px;fill:none;" transform="rotate(' + heading + ', 16, 16)"/></svg>',//'../../../../../assets/Images/arrow.png',//'<img src="../../../../../assets/Images/arrow.png" transform="rotate(' + heading + ', 16, 16)"></img>',
  anchor: new Microsoft.Maps.Point(16, 16)
});`

I suspect this is because my file hasn't loaded SpatialMath yet, but I still don't know how to resolve this issue.

I have these two lines at the top of my file
/// <reference path="..\..\..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Modules\SpatialMath.d.ts"/> /// <reference path="..\..\..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Microsoft.Maps.d.ts"/>
@rbrundritt
Copy link
Member

rbrundritt commented Nov 7, 2017 •
edited

You need to load the spatial math module first. Here is a code sample https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#calculateHeading+JS

@drewteachout
Copy link
Author

I tried using the example above, but now I'm getting a "Microsoft.Maps.loadModule is not a function" error.

My code below

Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
      var midIdx = Math.floor(locs.length / 2);
      var heading = Microsoft.Maps.SpatialMath.getHeading(locs[midIdx], locs[midIdx + 1]);

      var arrowPin = new Microsoft.Maps.Pushpin(locs[midIdx + 1], {
        icon: '<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32"><path d="M10.5 31 L16 16 21.5 31" style="stroke:#FFB500;stroke-width:2px;fill:none;" transform="rotate(' + heading + ', 16, 16)"/></svg>',//'../../../../../assets/Images/arrow.png',//'<img src="../../../../../assets/Images/arrow.png" transform="rotate(' + heading + ', 16, 16)"></img>',
        anchor: new Microsoft.Maps.Point(16, 16)
      });
      this.linkArrowArray.push(arrowPin);
    });

@rbrundritt
Copy link
Member

Have you added a script tag to load the bing maps API? The typescript definitions only define the API interface and doesn't contain the source code for the API. Here is a full sample https://msdn.microsoft.com/en-us/library/mt750637.aspx

@drewteachout
Copy link
Author

How do you go about that in typescript? I am developing in Angular 4. Below is what I think you are talking about

/// <reference path="..\..\..\..\..\..\node_modules\bingmaps\scripts\MicrosoftMaps\Modules\SpatialMath.d.ts"/>

@rbrundritt
Copy link
Member

That only loads the typescript definition, not the API code itself. You need to load the map script tag in html, or dynamically load it. Here is an angular 1.6 example to give you an idea https://github.com/Microsoft/BingMapsV8CodeSamples/tree/master/Samples/Other/Angular16

@drewteachout
Copy link
Author

I added this to my html layout for my component, but I am still receiving the same error.

<head>
  <script type='text/javascript'
  src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>

@rbrundritt
Copy link
Member

Do you have a GetMap function? As the code you are using specifies that as a callback. Try removing the callback as well as async defer from the script tag.

@drewteachout
Copy link
Author

That does not solve the problem. Are there any examples of anyone using Bing Maps API in an Angular 2+ application?

@rbrundritt
Copy link
Member

rbrundritt commented Nov 7, 2017 •
edited

Yes, lots. Please do a search in a search engine. There is also several full end to end components on github as well. I'm on vacation without a computer so a bit limited in terms of putting together code samples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rbrundritt @drewteachout