Passing GeoJSON object through function

[Koronag]

Hi

This might be the wrong place to ask, and/or way out of your scope, as i'm trying to implement leaflet-realtime in Angular.

I've created a first draft of typings so i can call the methods, classes etc. that i need, and it's working fairly well. The problem arises when i try to pass a GeoJSON object through a callback function. I can see from the console that the GeoJSON object seems to be correct, but realtime is not working.

The following is the relevant code:

function randomValue(success) {
  success();
}

function arrayProcessing(array) {
  const rand = array[Math.floor(Math.random() * array.length)];
  console.log(rand);
  return rand;

  array = [{geometry: {type: 'Point', coordinates: [10.09375, -4.585937]}, type: 'Feature', properties: {}},
          {geometry: {type: 'Point', coordinates: [10.09375, -4.203125]}, type: 'Feature', properties: {}},
          {geometry: {type: 'Point', coordinates: [10.757813, -4.203125]}, type: 'Feature', properties: {}},
          {geometry: {type: 'Point', coordinates: [10.757813, -4.585937]}, type: 'Feature', properties: {}},
          {geometry: {type: 'Point', coordinates: [10.09375, -4.585937]}, type: 'Feature', properties: {}},
  ];

var realtime = L.realtime(() => {randomValue(() => {arrayProcessing(this.array) }, ); }, this.realtimeOptions).addTo(map);

    realtime.on('update', function() {
        map.fitBounds(realtime.getBounds(), {maxZoom: 3});
    });

Can't use fetch as the application i'm developing needs to support IE, so the plan is to use callback functions. Starting out with an array of random GeoJSON objects and plan to use the httpClient in Angular to fetch data from an API later.

Any input is very much appreciated.

[perliedman]

It doesn't look like you are using the callback (success) provided by Leaflet Realtime: your source is a function that does not take any arguments (() =>). So Leaflet Realtime will never know when your values are ready.

[Koronag]

Yes you're right, it's working fine now. Also when implementing MarkerClusters.

function createRealtimeLayer(api, container) {
  return L.realtime(api, {
    interval: 3 * 1000,
    getFeatureId: function(f) {
      return f.properties.id;
    },
    cache: true,
    container: container,
  });
}

  clusterGroup = L.markerClusterGroup();
  subgroup1 = L.featureGroup.subGroup(this.clusterGroup);
  subgroup2 = L.featureGroup.subGroup(this.clusterGroup);

  realtime1 = createRealtimeLayer((success, error) => {
    try {
      success({
        type: 'FeatureCollection',
        features: beaconArray
      });
    }
    catch (error) {}
  }, this.subgroup1);

  realtime2 = createRealtimeLayer((success, error) => {
    try {
      success({
        type: 'FeatureCollection',
        features: beaconArray
      });
    }
    catch (error) {}
  }, this.subgroup2);

Thank you man.