How to add bing map to angular 11 application with svg marker

Image

How to add bing map to angular 11 application with svg marker

Angular

This tutorial describes how you can add bing map to angular 12 application.

Install bing map npm package

npm i bingmaps --save

Create  service bing-map.service.ts and add below code to load bingmap's js files.

bing-map.service.ts

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root',
})
export class BingMapService {
  
  constructor(private httpObj : HttpClient){}
  
  private getNativeWindow(): any {
    return window;
  }
  private getNativeDocument(): any {
    return document;
  }

  public Load(): Promise<void> {
    return new Promise<void>((resolve: Function, reject: Function) => {
      const script = this.getNativeDocument().createElement('script');
      script.type = 'text/javascript';
      script.async = false;
      script.defer = true;
      script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=bingAPIReady';      
      this.getNativeWindow()['bingAPIReady'] = () => {
        resolve();
      };
      script.onerror = (error: Event) => {
        reject(error);
      };
      this.getNativeDocument().body.appendChild(script);     
    });
  }
}

bing-map.component.html

 <div id="map" class="map"></div>

bing-map.component.css

.map{
    position:relative;
    width: 100vw;
    height:70vh;
}

bing-map.component.ts

import { BingMapService } from 'src/app/services/bing-map.service';
import 'bingmaps';
import { Subscription } from 'rxjs';
markers: any[];
constructor(private bingMapService: BingMapService) {}

GenerateData(){
    this.bingMapService.Load().then(() => {
        this.markers = [];
        this.markers.push({
            text: 'Marker',
            latitude: '37.0902',
            longitude: '95.7129',
            value:100,
            color: '#F00000'
        });
        this.InitMap();
    })
}
 InitMap() {
    var map = new Microsoft.Maps.Map('#map', {
      credentials: '<BingMapAPIKey>'
    });
    this.markers.forEach(marker => {
      var loc = new Microsoft.Maps.Location(Number(marker.latitude), Number(marker.longitude));    
      var pushpin = this.CreateMarket(loc,marker)
      map.entities.push(pushpin);
    });
    map.setView({ zoom: 0 });
  }

  CreateMarket(location,marker){
    let radius=15, strokeColor, strokeWidth;
    if (strokeColor === void 0) { strokeColor = ""; }
    if (strokeWidth === void 0) { strokeWidth = 0; }
    var svg = `<svg xmlns="http://www.w3.org/2000/svg">    
    <rect x="0" y="0" width="100" height="100" fill="${marker.color}"></rect>
    <text x="50" y="50" font-family="Segoe UI" font-size="50" fill="#FFF" text-anchor="middle" alignment-baseline="middle">${marker.value}</text>  
    <text x="0" y="170" font-family="Segoe UI" font-size="50" font-weight="bold" fill="#000">${marker.text}</text>
    </svg>`
    return new Microsoft.Maps.Pushpin(location, { icon: svg, anchor: new Microsoft.Maps.Point(radius, radius) });
  }
Widget is loading comments...

Top Articles