Title: leaflet-realtime
Last modified: September 19, 2019

---

# leaflet-realtime

 *  Resolved [c-m](https://wordpress.org/support/users/c-m/)
 * (@c-m)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/leaflet-realtime/)
 * Hi,
 * This is a nice front end for leaflet, but what I would like to do is include 
   realtime tracking.
 * How would I go about using leaflet-realtime in conjunction with this plugin?
   (
   [https://github.com/perliedman/leaflet-realtime/blob/master/README.md](https://github.com/perliedman/leaflet-realtime/blob/master/README.md))
 * Thanks in advance for any advice

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [bozdoz](https://wordpress.org/support/users/bozdoz/)
 * (@bozdoz)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/leaflet-realtime/#post-11950695)
 * Good tutorial on the github page for integrating plugins:
 * [https://github.com/bozdoz/wp-plugin-leaflet-map#frequently-asked-questions](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/leaflet-realtime@2.2.0/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!
 *  Thread Starter [c-m](https://wordpress.org/support/users/c-m/)
 * (@c-m)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/leaflet-realtime/#post-11953703)
 * 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

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘leaflet-realtime’ is closed to new replies.

 * ![](https://ps.w.org/leaflet-map/assets/icon-256x256.png?rev=1693083)
 * [Leaflet Map](https://wordpress.org/plugins/leaflet-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/leaflet-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/leaflet-map/)
 * [Active Topics](https://wordpress.org/support/plugin/leaflet-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/leaflet-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/leaflet-map/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [c-m](https://wordpress.org/support/users/c-m/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/leaflet-realtime/#post-11953703)
 * Status: resolved