CODEWITHSUNDEEP
javascriptangulartypescriptsetinterval
Madpop
Madpop

Reputation: 725

How to stop set Interval flickering using angular 2+

Here i am displaying the dynamic data i.e lat and long on the google maps and here i am applying the setInterval() below is my code:

this.timer = setInterval(()=>{this.getMapData();},30000);

here the issue is when ever the data is updating or calling the this.getMapData() then the map is also flickering.Is It possible to update the data for every 30 sec with out flickering the div/map

getMapData() {
    this.spinner.show();
    this.serv.getMapData(this.ds, this.ln).subscribe(res => {
      this.spinner.hide();
      this.deleteMarkers();


      if (res.Data && res.Data.length > 0) {

        this.mapData = res.Data;
        console.log(JSON.stringify(this.mapData));


        if (this.mapData != null && this.mapData.length > 0) {
          for (var i = 0; i < this.mapData.length; i++) {
            var latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};
            this.addMarker(latlng, this.mapObject, this.mapData[i].Name);
            this.markerName = this.mapData[i].Name;


          }
        }
      } else {

        this.toastr.error('No Data Found', 'Oops!');
      }

    },err=>{
      this.spinner.hide();
    });


  }




 addMarker(latlng, mapobj, markerLabel) {
    var marker = new google.maps.Marker({
      position: latlng,
      label: '',
      map: mapobj,
      animation: google.maps.Animation.DROP,
    });





var infowindow = new google.maps.InfoWindow({
  content: markerLabel
});

google.maps.event.addListener(marker, 'click', function() {
 // infowindow.open(Map,marker);
});



 infowindow.open(Map,marker);





   // This is for set postion for the marker after getting dynamic data it posittions to the point
   mapobj.setZoom(17);
   mapobj.panTo(marker.position);
    this.markers.push(marker);
  }



// Sets the map on all markers in the array.
  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);

    }
  }

  // Removes the markers from the map, but keeps them in the array.
  clearMarkers() {
    this.setMapOnAll(null);
  }


  // Deletes all markers in the array by removing references to them.
  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

Upvotes: 1

Views: 1151

Answers (1)

CruelEngine
CruelEngine

Reputation: 2841

Based on our discussion : inside the addMarker() , 

if(this.marker != null){
    this.marker = new google.maps.Marker({
      position: latlng,
      label: '',
      map: mapobj,
      animation: google.maps.Animation.DROP,
    });
   }
   else{
     this.marker.setPosition(latlng);
   }

So at first it will check if marker is null .If it is null then a new marker object is created . If not , then the marker's position is changed to the dynamic latlng.

So your , map flickering issue will be resolved as only the marker position is changing . Also remove the this.deleteMarkers() as you are changing position now , there is no need of deleting the marker from map.

Now , instead of using a setInterval , you can use rxjs operator interval to call the service and fetch data once in 30 seconds or whatever your time is .

To do this , inside your service do something like this :

return Observable.interval(30000).flatMap(()=>{ 
  return this.http.get(url + data+'/LocationId='+ param).map(res => { 
     return res.json(); 
  }); 
)};

EDIT

You'll need the following imports : 

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap`;

Upvotes: 1

Related Questions