Have you ever wanted to put your real-time, mobile sensor data on your Google map? This step-by-step HowTo tutorial shows you how easy it is to use Valarm APIs and the Google Maps JavaScript API to do just that!

Click here if you’d like to get to the tutorial for Valarm JSON APIs with Esri ArcGIS JavaScript API.

In order to set up your Valarm APIs, see this blog post and video to learn how you configure Valarm’s APIs for JSON, KML, CSV, and GeoRSS. You have two options for how you want to use the Valarm API:

  • Latest – gives you however many of the most recent alerts you’d like or
  • Query – allows you to specify begin and end dates for your sensor data as well as which sensors you would like the API feed to contain.

Once you have your Valarm API URL you can put your real-time sensor data on the map by using a jQuery AJAX call to Valarm’s cloud servers and then create a feature on the map using the geo-tagged sensor data. In this example we’re using a meteo weather sensor and you can use any Valarm compatible sensors like those for:

 

The full HTML source for this tutorial demo is available here. In this example we get the latest Valarm sensor data (environmental factors like temperature, humidity, pressure) then put it in a popup window on the map. Use your web browser to view the source code.

 

Below is an overview of some of the basic steps:


//Use the Valarm API to get the latest sensor data on domReady.
//Then save the geo-tagged sensor data.

function initialize() {
  $.ajax({
    url: "http://tools.valarm.net/api/public/device/"
         + "537ba8f4e4b0a6279567430f/latest.json?callback=?",
    async: false,
    dataType: "jsonp",
    success: function(data) {
      lat = data.events[0].location.lat;
      lng = data.events[0].location.lng;
      voc = data.events[0].gases.voc;
      init();
    }
  });
}


//Set up the Google map and features with Valarm mobile sensor data.

function init() {
  var myLatLng = new google.maps.LatLng(lat, lng);
 
  var mapOptions = {
    center: myLatLng,
    zoom: 8
  };
 
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
 
  //Make a popup balloon / info window with the Valarm sensor data
  var contentString = "<div id='content'><p>Valarm.net VOCs: " + voc + "</p></div>";
 
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
 
  //Create a new marker with geo-tagged sensor data and put it on the map
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Valarm.net APIs Example - VOCs: ' + voc
  });
 
  //Set the infowindow to popup when the marker is clicked
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
 
}


Here’s some screenshots of the sample JavaScript + HTML page:


ValarmAPIsJSONPGoogleMapsScreencapture1


ValarmAPIsJSONPGoogleMapsScreencapture2


 


Change the code to point to your Valarm sensor data and feel free to customize the map to your liking. Add your logo, more layers, and also an auto-refresh to continuously grab your latest sensor data using the Valarm APIs!


Get the Valarm Pro app in the Google Play store or use another Valarm Connector Device for getting your sensor data in the cloud. Valarm compatible sensors are available at shop.valarm.net. You can configure your Valarm APIs at tools.valarm.net. Don’t hesitate to contact us if you have any questions at info@valarm.net.