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

All replies

  • Hi Gaurav,

    You will use the V8 control as shown here:

    https://www.bing.com/api/maps/sdk/mapcontrol/isdk/adddefaultpolyline

    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.

    Sincerely, 

    IoTGirl

    Wednesday, June 26, 2019 6:20 PM
    Owner
  • 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>
    </x-map>
    
    ```typescript
    
    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;
    
    @Component({
        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);
    map.entities.push(polyline);


    Monday, July 8, 2019 6:01 PM
    Owner
  • 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

    https://stackoverflow.com/questions/56850073/not-able-to-draw-a-polyline-in-angular-7-bingmapx-map


    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?

    Sincerely,

    IoTGirl

    Monday, August 19, 2019 4:45 PM
    Owner