Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Real-time Tracking Geo Latitude/Longitude on a Map</h1> <p>You are looking to update coordinate entities (lat/lon position) on a map (google maps or otherwise) in real-time as the updates occur. Here is a blog post that may get you started in the right direction: <a href="http://blog.pubnub.com/streaming-geo-coordinates-from-mongodb-to-your-iphone-app-with-pubnub-using-websocket-sdk/" rel="nofollow noreferrer">http://blog.pubnub.com/streaming-geo-coordinates-from-mongodb-to-your-iphone-app-with-pubnub-using-websocket-sdk/</a> - this uses MongoDB and Ruby rather than PHP and MySQL. However it will be easy to get things setup in this case with a real-time map in PHP and MySQL on an HTML page with the following details. And there is a video too: <a href="https://vimeo.com/60716860" rel="nofollow noreferrer">https://vimeo.com/60716860</a></p> <h2>Using MySQL to Trigger Update in Real-time</h2> <p>First you'll want to use either MySQL triggers to push the Lat/Long coords - <a href="https://stackoverflow.com/questions/13474012/invoke-pusher-when-mysql-has-changed?answertab=active#tab-top">Invoke pusher when mysql has changed</a> - this uses MySQL Triggers</p> <p>Or as an alternative you may want to use PHP directly to invoke the push signal using a PHP push SDK as follows: <a href="https://github.com/pubnub/php#php-push-api" rel="nofollow noreferrer">https://github.com/pubnub/php#php-push-api</a></p> <pre><code>$pubnub-&gt;publish(array( 'channel' =&gt; 'live_map_coords', 'message' =&gt; array( 12.3482, 8.3344 ) )); </code></pre> <h2>Receiving The Push Message in JavaScript and Showing the Updates on a Map</h2> <pre><code>&lt;script src=//pubnub.a.ssl.fastly.net/pubnub-3.4.5.min.js&gt;&lt;/script&gt; &lt;script&gt;(function(){ PUBNUB.init({ subscribe_key : 'demo' }).subscribe({ channel : 'live_map_coords', callback : function(lat_lon) { alert(lat_lon) } }); })();&lt;/script&gt; </code></pre> <p>Once you have an <code>map.html</code> page with the above code in it, you can change the <code>alert(lat_log)</code> message popup with drawing coords on a map. Here is a fully working map drawn example using <code>D3</code> JavaScript SVG rendering Framework: <a href="https://github.com/stephenlb/pubnub-mongo-pipe/blob/master/phone/map.html" rel="nofollow noreferrer">https://github.com/stephenlb/pubnub-mongo-pipe/blob/master/phone/map.html</a></p> <blockquote> <p><strong>NOTE:</strong> This is only a starting point and provides you with references on getting started to make it easy and simple, yet flexible based on the direction you will be taking your app.</p> </blockquote> <h2>Next Steps to Piece Together the Real-time Geo Map</h2> <p>You will next want to do the following to complete the process and join together all the separate components listed here.</p> <ol> <li>Modify the <code>map.html</code> page for your purposes to display always-visible dots. Note that in the video the dots are temporary beacons that display and vanish rapidly. You'll want to make them persist on the map. This is basically the <em>"Make it look the way you want it"</em> step.</li> <li>Decide how and when you want to trigger the TCP Socket Push events from PHP or MySQL directly. <strong>I'd recommend the PHP approach</strong>.</li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload