How can I show different streetView when Clicking two icons?

Question

What I wanted to do is I have a map. That map show and different push pins. That indicate different locations. As well as I have street view Icons for all that locations that indicate using pushpins.

Here is the code:

<div class="comp-container-control">

  <div *ngFor="let comp of compsData; let i = index">

    <ng-container *ngTemplateOutlet="comparables; context:{compLoc: comp['location'], compView: comp['view'], compAddress: comp['address'], compIndex: i, complocInfo: comp['locationInfo'], viewLocationInfo : comp['viewLocationInfo']}"></ng-container>

  </div>

  <ng-template #comparables let-compLoc="compLoc" let-compView="compView" let-compAddress="compAddress" let-compIndex="compIndex" let-complocInfo="complocInfo" let-viewLocationInfo="viewLocationInfo">
    <div class="wrapp-comp-border">
      <div class="header-container">
        <div class="header-heading">
          <h3 class="control-first-heading">Comparable {{compIndex + 1}}</h3>
          <h4 class="control-second-heading">{{compAddress}}</h4>
        </div>

        <div class="icon-container">
          <img *ngIf = 'complocInfo.streetView' src="./assets/images/streetview.png" (click)="focusPropertyOnMap(complocInfo.lat, complocInfo.long, 'streetside')">
          <img src="./assets/images/map.png" (click)="aerialView(complocInfo.lat, complocInfo.long)">
          <img src="./assets/images/info.png" (click)="showDialog(viewLocationInfo , 'comp')">
        </div>
      </div>

TS

  focusPropertyOnMap(lat, long, viewType) {
    let geoinfo = [];
    let geo = {'latitude': lat, 'longitude': long};

    geoinfo['location'] = {'latitude': geo.latitude, 'longitude': geo.longitude};

    this.showStreetVIew(geoinfo, viewType)
  }

  private showStreetVIew(e, viewType) {
    let latitude = e.location.latitude;
    let longitude = e.location.longitude;

    let loc = new Microsoft.Maps.Location(latitude, longitude);

    this.map.setView({
      center: {latitude: loc.latitude, longitude: loc.longitude},
      mapTypeId: Microsoft.Maps.MapTypeId[`${viewType}`],
      zoom: 17
    });
  }

final out Out < click here to see the out Put

So what happen is if I click one of the streetView Icon it execute focusPropertyOnMap() this function and inside that function I have set showStreetVIew() function then execute that and show the streetView

But problem is immediately if I click another streetView icon that location streetView is not coming. if close the streetView and again click the streetView icon its comming. Have any idea or solution for that ?

Answer 1

Sounds like a race condition. Streetside is rendered in a separate canvas context I believe and is done so asynchronously. This is most likely the cause of your issue. I'm able to reproduce this with this simple code block:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    /* No need to set credentials if already passed in URL */
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 18,
    center: new Microsoft.Maps.Location(28.332823, -81.492279),
    streetsideOptions: { onErrorLoading: onErrorLoading }
});
map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.streetside });

map.setView({ mapTypeId: Microsoft.Maps.MapTypeId.streetside,
    center: new Microsoft.Maps.Location(28.33, -81.492) });

function onErrorLoading(e) {
    alert('here')
}

Note that there is an error handling option you can wrap to monitor for this type of issue, and then do something to mitigate it.

A simpler solution would be to either monitor when going into streetside and ignore any subsequent clicks to enter it until they have exited that mode, or to hide/show the layers on your map when entering/exiting streetside so as to prevent users from selecting a second option.