leaflet-realtime

Good tutorial on the github page for integrating plugins:

https://github.com/bozdoz/wp-plugin-leaflet-map#frequently-asked-questions

Here’s what you’d do:

in functions.php:

add_action('leaflet_map_loaded', 'fs_leaflet_loaded');
function fs_leaflet_loaded() {
	// plugin CDN
  wp_enqueue_script('leaflet_realtime', 'https://unpkg.com/[email protected]/src/L.Realtime.js', Array('wp_leaflet_map'), '2.2.0', true);

  // custom js
  wp_enqueue_script('custom_js', get_theme_file_uri( '/js/custom.js' ), Array('leaflet_realtime'), '2.2.0', true);
}

in theme/js/custom.js:

function main() {
  if (!window.WPLeafletMapPlugin) {
    console.log('no plugin found!')
    return
  }

  // iterate any of these: <code>maps</code>, <code>markers</code>, <code>markergroups</code>, <code>lines</code>, <code>circles</code>, <code>geojsons</code>
  var maps = window.WPLeafletMapPlugin.maps

  for (var i = 0, len = maps.length; i < len; i++) {
    var map = maps[i]
    map.whenReady(function() {
      var self = this;
      var realtime = L.realtime({
          url: 'https://wanderdrone.appspot.com/',
          crossOrigin: true,
          type: 'json'
        }, {
          interval: 1 * 300
        }).addTo(self);
      
      realtime.on('update', function () {
        self.fitBounds(realtime.getBounds(), {maxZoom: 3});
      })
    })
  }
}

window.addEventListener('load', main)

Tested it out; looks cool!

Thanks for taking a look.

That works well. Now I just need to add a track line and a little popup when you click on the icon. Should be well within leaflet’s normal capabilities