Our Blog

16.07.10 @ 12:57

Online real-time mapping on drupal sites.

SUBMITTED BY royi

In this post I would like to show a way to combine Drupal OSM (open street maps) interface with websockets push technology, in order to allow drupal based sites to work as a real-time online monitor, for real world physical actions.
Unless you are already familiar with the terms that I have mentioned so far, you probably don't really understand what I am talking about, so as a prologue I'll elaborate on a few key terms:

  1. Websocket is (simply put): a port which is assigned to "listen" to changes in the remote client's data and notify your client without polling or busy-waiting-type techniques and thus saves a lot of time,web traffic and battery time (important when using a mobile device).
  2. Push technology: as it is called is a technology used to push information into a designated listener websocket.
  3. OSM: an open-source project which is essentially a copy of the Google maps project but with more customization and localization.
    OK, so after you understand the basics of what we're dealing with here let's put it all together:

  4. Install the Geo and OpenLayers modules for Drupal and create a view with an "OpenLayers data" display to create the map. (for more information go to http://openlayers.org/).

  5. Create a customized js script inside the theme folder of the site which incorporates websockets in order to create the listener.
    (for a great and easy way to start try: http://pusherapp.com/ ).
  6. Now, use the same technology to implement a trigger application to your Android or Iphone mobile device, since both of them have methods which are triggered only when you move there's no polling here either so it's not that heavy on your battery or your 3G account.

And there you have it: a Drupal site with a map that shows your device's location on a real-time online map.... think of it as Stalker2.0 :^)

For a taste of what i talked about in this post, take a look at the video- it's in Hebrew but I added some annotations so you can figure out what's going on

have fun.

0 Comments so far

Post a Comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Use one of the forms name.module, name.theme, name.translation, name.installprofile or name.project, in order to link to http://drupal.org/project/name. Note that a link will be generated even if a project does not exist.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <b> <a> <p> <br> <em> <strong> <cite> <table> <tr> <td> <th> <tbody> <ul> <ol> <li> <dl> <dt> <dd><img> <div> <h2> <h3> <h4> <code>

More information about formatting options

Or