none
Bing map with Angular RRS feed

  • Question

  • Hi There,

    I am using bing map with angular in one of the <g class="gr_ gr_52 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar multiReplace" data-gr-id="52" id="52">project</g>. There we are displaying the sites at the different part of the world.

    based on the site filtered in geographic location, it is zooming using the max and min co-ordinates. we are passing the values in Box attribute of x-map. now we want to restrict the zoom when its only one site as if only one site is there, its zooms too much into the street level that where the site is located.  we want to keep zoom level to 5 when only one site <g class="gr_ gr_963 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" data-gr-id="963" id="963">is exist</g> for the filter.

    Kindly help me with <g class="gr_ gr_994 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" data-gr-id="994" id="994">scenario</g>.

    below is the ts file:

    import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
    import {
      Component, OnInit,  OnDestroy, Input, HostListener, ElementRef, ViewChild,
      Output, EventEmitter, ViewEncapsulation
    } from '@angular/core';
    import {
      IMapOptions, IBox, ILatLong, IMarkerEvent,
      IPoint, MapMarkerDirective, Marker
    } from 'angular-maps';
    import { TranslateService } from '@ngx-translate/core';
    import { SitePerformance } from '../../../_models';
    import { Subscription } from 'rxjs/Subscription';
    import { Icon } from '../../../_enum';
    import { QualityService } from '../../../_services/quality.service';
    import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
    
    @Component({
      selector: 'nalco-water-quality-map',
      templateUrl: './water-quality-map.component.html',
      styleUrls: ['./water-quality-map.component.scss'],
      encapsulation: ViewEncapsulation.None
    })
    export class WaterQualityMapComponent implements OnInit, OnDestroy, OnChanges {
      private subscriptions: Subscription[] = [];
      public Icons = Icon;
      private _boxValue: any;
      @Input() set mapData(value: Array<SitePerformance>) {
        if (value.length !== 0 && value !== undefined) {
          this.mapMarkers = value;
          this.setMarkerData();
        } else {
          this.mapMarkers = [];
        }
      }
      @Input() mapType?: string;
      @Input() set filterFlag(value) {
        if (value !== undefined && value !== null && value !== 1) {
          this._optionData.zoom = 5;
        } else {
          this.setIbox();
        }
      }
    
    // tslint:disable-next-line: no-output-rename
      @Output('getSiteData') getSiteData = new EventEmitter<any>();
      @ViewChild('infoBox') public infoBox: ElementRef;
    
      /*x-marker
    
      */
      private Checkzoom: any = 2.5;
      private mapMarkers: Array<SitePerformance>;
      public markerData: Array<any> = new Array<any>();
      latitude = new Array<number>();
      longitude = new Array<number>();
      latLongData = new Array<any>();
      _optionData: IMapOptions = {
        disableBirdseye: true,
        disableStreetside: false,
        navigationBarMode: 1,
        mapTypeId: 7,
        zoom: 2
      };
      _box: IBox;
      _center: ILatLong;
      centerLatitude: number;
      centerLongitude: number;
      _infoBoxBeakPosition: number;
      _infoBoxTop: number;
      _infoBoxLeft: number;
      _cardLocation: ILatLong;
      _showInfoBox = false;
      _infoBoxMarker: MapMarkerDirective | Marker;
      _infoBoxData: any;
      private tooltipText: any;
    
      constructor(private translate: TranslateService, private waterQualityService: QualityService) {
      }
    
      ngOnInit() {
        if (this.mapMarkers && (this.mapMarkers.length !== 0)) {
          this.setMarkerData();
        }
    
        const refreshSubscription = this.waterQualityService.refresh$.subscribe(
          data => {
            if (data !== '') {
              this._optionData.zoom = 5;
            } else {
              this.setIbox();
            }
    
          }
        );
      }
    
      @HostListener('document:click', ['$event']) clickedOutside($event) {
        if ((/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase())) {
          if ($event.target.className !== 'infobox-inner') {
            this.HideCard();
          }
        } else {
          this.HideCard();
        }
    
      }
    
      hoverOutMap(event) {
        this.HideCard();
      }
    
      private setMarkerData() {
        this.markerData = [];
        this.getLatLong();
        this.setIbox();
      }
    
      private setIbox() {
        
    
          if(this.latitude.length === 1){
    
            const centerPoint: any = {
              latitude : this.latitude,
              longitude : this.longitude
            };
    
            console.log('min Zoom;')
            this._optionData.zoom = 5;
            this._optionData.center = centerPoint;
          }
          else{
            this._boxValue = { maxLatitude: Math.max(...this.latitude),
              maxLongitude: Math.max(...this.longitude),
              minLatitude: Math.min(...this.latitude),
              minLongitude: Math.min(...this.longitude),};
          }
        // this._box = {
         
        // };
      }
    
      private getLatLong() {
        this.latitude = [];
        this.longitude = [];
        for (let i = 0; i < this.mapMarkers.length; i++) {
          const latitude = +this.mapMarkers[i].Latitude;
          const longitude = +this.mapMarkers[i].Longitude;
          this.latitude.push(latitude);
          this.longitude.push(longitude);
          this.latLongData.push({ latitude: latitude, longitude: longitude });
        }
      }
    
    
      /*************/
      /**
       * Hides the card currently displaying.
       * @private
       * @method
       */
      HideCard(): void {
        this._showInfoBox = false;
        this._cardLocation = null;
      }
    
      /**
       * Repoisitons the card to a new anchor point.
       * @param {IPoint} anchor - New anchor point.
       * @private
       * @method
       */
      PositionCard(anchor: IPoint): void {
        // default positioning
        const div: HTMLDivElement = this.infoBox.nativeElement;
        this._infoBoxLeft = anchor.x - div.clientWidth / 2;
        this._infoBoxTop = anchor.y + 10 - div.clientHeight;
        this._infoBoxBeakPosition = 0;
      }
    
      /**
       * Repositions the card in response to a resize event.
       * @param {Event} e - Event arguments.
       * @private
       * @method
       * @memberOf {GroupMapComponent}
       */
      @HostListener('window:resize', ['$event'])
      RepositionCard(e: any): void {
        if (!this._showInfoBox) { return; }
        if (this._cardLocation != null) {
          this._infoBoxMarker['LocationToPixel'](this._cardLocation).then((point: IPoint) => {
            if (point == null) {
              this.HideCard();
            } else {
              this.PositionCard(point);
            }
          });
        } else {
          if (e != null) {
            setTimeout(() => {
              this._infoBoxMarker['LocationToPixel']().then((p: IPoint) => {
                if (p == null) {
                  this.HideCard();
                } else {
                  this.PositionCard(p);
                }
              });
            }, 100);
            return;
          }
          this._infoBoxMarker['LocationToPixel']().then((pi: IPoint) => {
            if (pi == null) {
              this.HideCard();
            } else {
              this.PositionCard(pi);
            }
          });
        }
        if (e !== null) {
          this.HideCard();
        }
      }
    
      /**
       * Shows the card.
       * @param {IMarkerEvent} e - The marker event used to position the card.
       * @param {any} marker- The marker to display on the card.
       * @private
       * @method
       * @memberOf {GroupMapComponent}
       */
      ShowCard(e: IMarkerEvent, marker: any): void {
        this._infoBoxData = marker;
        this.tooltipText = marker.SiteName + ' - ' + marker.SiteLocation;
        this._showInfoBox = true;
        this._infoBoxMarker = e.Marker;
        if (e.Pixels != null) {
          this.PositionCard(e.Pixels);
          if (e.Location) { this._cardLocation = e.Location; }
        } else {
          e.Marker['LocationToPixel']().then((p: IPoint) => {
            if (p == null) { p = { x: e.Click['point'].x, y: e.Click['point'].y }; }
            this.PositionCard(p);
          });
        }
    
        setTimeout(() => {
          this.RepositionCard(null);
        }, 50);
      }
    
      toggelTool(tooltip) {
        if (tooltip.isOpen()) {
          tooltip.close();
        } else {
          tooltip.open();
        }
      }
    
      ngOnDestroy() {
        // prevent memory leak when component is destroyed
        this.subscriptions.forEach(s => s.unsubscribe());
      }
    
      ngOnChanges(){
        if (this.latitude.length > 1) {
          this._boxValue = this._box;
          console.log(this._box+ 'This is 1');
        } 
        else if (this._boxValue === undefined || this._boxValue === null && this.latitude.length <= 1) {
          
        const centerPoint: any = {
          latitude : this.latitude,
          longitude : this.longitude
        };
          console.log(this._box+ 'This is 2');
          console.table(centerPoint);
          this._optionData.zoom = 5;
          this._optionData.center = centerPoint;
        } 
        else {
              
        const centerPoint: any = {
          latitude : this.latitude,
          longitude : this.longitude,
        };
          console.log(this._box+ 'This is 3');
          this._optionData.zoom = 5;
          this._optionData.center = centerPoint;
        }
      }
    }
    

    Thanks,

    Krupal

    Friday, March 22, 2019 11:39 AM

All replies