I successfully integrated the Bing map with Angular using the angular-map package, and now I want to draw a circle around a given latitude and longitude. To achieve this, I installed the following npm packages:
- npm install --save angular-maps
- npm install --save bingmaps
- npm install --save @types/bingmaps
- npm install --save [email protected]
- npm install --save json-loader
app.component.ts
import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from 'src/app/service/local-storage.service';
import { LOCATION_INITIALIZED } from '@angular/common';
import { TranslateServiceService } from 'src/app/service/translate-service.service';
import {
MapModule, MapAPILoader, MarkerTypeId, IMapOptions, IBox, IMarkerIconInfo, WindowRef, DocumentRef, MapServiceFactory,
BingMapAPILoaderConfig, BingMapAPILoader,
GoogleMapAPILoader, GoogleMapAPILoaderConfig
} from 'angular-maps';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'rj';
lat: string;
long: string;
constructor(
private localStorageService: LocalStorageService,
private translateServiceService: TranslateServiceService) {
}
ngOnInit(): void {
this.lat = '18.5204';
this.long = '73.8567';
this.checkLanguagePerferences();
}
checkLanguagePerferences() {
const language = this.localStorageService.getLanguage();
if (language) {
this.translateServiceService.selectLangulage(language);
}
}
_markerTypeId = MarkerTypeId;
_options: IMapOptions = {
disableBirdseye: false,
disableStreetside: false,
navigationBarMode: 1,
showBreadcrumb: true,
// zoom: 10
};
_box: IBox = {
maxLongitude: null,
maxLatitude: null,
minLatitude: 20,
minLongitude: 64
};
public _iconInfo: IMarkerIconInfo = {
markerType: MarkerTypeId.RoundedImageMarker,
url: 'https://cdn3.iconfinder.com/data/icons/flat-icons-web/40/Location-512.png',
size: { width: 40, height: 40 },
markerOffsetRatio: { x: 0.5, y: 0.5 }
};
_click() {
console.log("hello world...");
}
}
App.component.html
<i class="fa"></i>
<div style="height: 600px" class="col-sm-6 col-md-6 col-lg-6">
<x-map #xmap [Options]="_options">
<x-map-marker
[Latitude]=lat
[Longitude]=long
[Title]="'My Marker'"
[IconInfo]="_iconInfo">
<x-info-box
[DisableAutoPan]="true"
[Description]="'Hi, this is the content of the <strong>info window</strong>. It is your responsibility to implement functionality such as close, etc...'">
<x-info-box-action [Label]="'Click Me'" (ActionClicked)="_click()"></x-info-box-action>
</x-info-box>
</x-map-marker>
</x-map>
</div>
Issue: Unable to create a circle around the map marker.