Map update periodically in forest admin using leaflet

I am using map to show riders while driving. Map is showing location as a marker on Map. But my map is not updating after data updated in mongodb. I am using forestadmin and node js. In forestadmin, I am using smartview where I will have to use ember.js. I am showing leaflet OpenStreetMap map.

here is the javascript I am using:

export default Component.extend(SmartViewMixin, {
  store: service(),

  tagName: "",

  map: null,
  loaded: false,

  init(...args) {
    this._super(...args);

    this.loadPlugin();
  },

  didInsertElement() {
    this.displayMap();
  },

  onRecordsChange: observer("records", function () {
    this.displayMap();
  }),

  loadPlugin() {
    scheduleOnce("afterRender", this, () => {
      $.getScript(
        "//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js",
        () => {
          $.getScript(
            "//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js",
            () => {
              this.set("loaded", true);
              this.displayMap();
            }
          );
        }
      );

      const headElement = document.getElementsByTagName("head")[0];
      const cssLeafletLink = document.createElement("link");
      cssLeafletLink.type = "text/css";
      cssLeafletLink.rel = "stylesheet";
      cssLeafletLink.href =
        "//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css";

      headElement.appendChild(cssLeafletLink);

      const cssDrawLink = document.createElement("link");
      cssDrawLink.type = "text/css";
      cssDrawLink.rel = "stylesheet";
      cssDrawLink.href =
        "//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css";

      headElement.appendChild(cssDrawLink);
    });
  },

  displayMap() {
    if (!this.loaded) {
      return;
    }

    if (this.map) {
      this.map.off();
      this.map.remove();
      this.map = null;
    }

    const markers_arr = [];

    this.records.forEach(function (record) {
      markers_arr.push([
        record.get("forest-latitude"),
        record.get("forest-longitude"),
        record.get("id"),
        record.get("forest-userId.forest-email"),
       
        record.get("forest-userId.forest-bikeModel"),
        record.get("forest-userId.forest-bikeRegNo"),
        record.get("forest-userId.forest-phone"),
      ]);
    });
    var map = L.map("map").setView(
      new L.LatLng(markers_arr[0][0], markers_arr[0][1]),
      7
    );

    const osmUrl =
      "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png";
    const osmAttrib =
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
    const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
    map.addLayer(osm);

    var markers = [];

    markers_arr.forEach(function (mark) {
      var foo = "ID: "+mark[2] + "\n <br>Email: " + mark[3]+ "\n <br>Phone: " + mark[6]+ "\n <br>Bike Model: " + mark[4] + "\n <br>Bike #: " + mark[5]
      var marker1 = L.marker([mark[0], mark[1]] )
        .addTo(map)
        .bindPopup(foo);
      markers.push(marker1);

      marker1.on("mouseover", function (ev) {
        marker1.openPopup();
      });
    });

    function markerFunction(id) {
      for (var i in markers) {
        var markerID = markers[i].options.title;
        if (markerID == id) {
          markers[i].openPopup();
        }
      }
    }
  },
});

and here is the HTML:

<style>
  #map {
    width: 100%;
    height: 100%;
    z-index: 4;
  }  
</style>
<div id="map"></div>

I also use fetchRecord in HTML but it not updating latest data.

<button >
  Refresh data
</button>

Help me 🙏🏻🙏🏻🙏🏻