how to draw poly-line on bing map angular 7? RRS feed

  • Question

  • how to draw poly-line on bing map angular 7?
    Wednesday, June 26, 2019 5:29 AM

All replies

  • Hi Gaurav,

    You will use the V8 control as shown here:


    Bing maps is not "Angular" specific but rather a web control that you can add to your environment.  See Ricky's answer at https://social.msdn.microsoft.com/Forums/en-US/61e646bc-1d56-4865-9f55-099737798940/angular-4-bing-maps-v8-web-controls-setup-issue for more details.



    Wednesday, June 26, 2019 6:20 PM
  • below is code which I am using.

    <x-map #xmap [Options]="_options" [Box]="_box">
    <x-map-polyline [Paths]="path" [StrokeColor]="blue" [StrokeWeight]="10"></x-map-polyline>
    import { Component, OnInit } from '@angular/core';
    import { Configuration } from '../app.constants';
    import {
        IMapOptions, ILatLong
    } from 'angular-maps';
    /// <reference path="bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
    let PathData: Array<any> = null;
        selector: 'virtuoso-map-bing',
      templateUrl: './map-bing.component.html',
      styleUrls: ['./map-bing.component.scss']
    export class MapBingComponent implements OnInit {
      path: Array<ILatLong> | Array<Array<ILatLong>>;
      constructor() {
        this.path = [{ latitude: -27.153, longitude: 152.9778 },
          { latitude: -27.409, longitude: 153.0763 }
      ngOnInit() {
      _options: IMapOptions = {
        disableBirdseye: false,
        disableStreetside: false,
        navigationBarMode: 2,
        showMapTypeSelector: true,
        showCopyright: false,
        disableZooming: false,
        showDashboard: true,

    Wednesday, July 3, 2019 6:21 AM
  • Again, I can't help you with angular but a simple polyline can be created like this (https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/adddefaultpolyline):

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
    var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(-27.153, 152.9778),
        new Microsoft.Maps.Location(-27.409, 153.0763)], null);

    Monday, July 8, 2019 6:01 PM
  • HI,

    I am working on Angular 7. I am using x-Map for Bing Map. but i not able the draw poly-line on Bing map using x-map.

    Please give me any suggestion.  I have search google but not found a solution.

    you can see this link where I describe my code in detail


    Monday, August 19, 2019 9:11 AM
  • Hi Gaurav,

    Who provides you "X-Map"?  I am not familiar with that tool. Maybe that is blocking the polyline calls?



    Monday, August 19, 2019 4:45 PM