A Smart City in Practice: Mapping Sensor Location on Google Maps

by Tamanna Chawla Chopra

In Part I of our look at the Smart City, my colleague Steven Brew outlined the basics: What constitutes a Smart City, and what challenges municipalities face in trying to realize the lofty goal of becoming “Smart.” In Part II, we look specifically at what may be the most important building block in this process: mapping.

Mapping allows users and those responsible for a city’s operations and safety to easily visualize location information by plotting the sensor(s) against known landmarks. This can be done for internal and external sensor locations using a variety of map types from street maps, to satellite pictures, to floor plans. For the demonstration purposes, we will review in this post how to plot external locations on a Street View using the Google Maps API. We assume that you have access to the location (latitude & longitude) data via a REST API. Let’s see how the data plays-out on an actual map using these simple steps.

Step 1: Google Maps Javascript API key

We are going to use the Google Maps Javascript API to map the location data. Fortunately it is pretty simple to register as a developer and use the APIs.

The first step is to get an API key for the Google Maps Javascript API from the webpage here.
On this webpage, you will see ‘Get A Key’ button on top right corner of the page. Either choose an existing project or create one if you don’t have one already, (by following the Google Maps API ‘Getting Started’ documentation). Once generated, keep your API key handy, you will need it shortly.

Step 2: Get your sensor location data

Now make sure you have access to your sensor location data. Usually, you will use REST API requests to get your data from a data store in the JSON format. If you do not have a backend capable of storing and retrieving JSON data, that’s Ok. You store and process location data in many ways like a CSV file–get creative. Considering you know best where to get your data, let’s proceed.

Sensors may report location in a variety of ways. Most commonly the location will be determined using GPS, but some sensor networks have the ability to calculate location using triangulation of the radio signals. You might also have static locations for sensors that are fixed in place. If the sensor is reporting location, the location data may not be obvious. Do you see a collection of latitudes & longitudes in this data? If not, your payload may be encoded or compressed in your data. Consult your vendor’s documentation or the sensor’s code to determine the format of the payload. You might have to parse this payload to get the actual latitude, longitude locations.

Here is a sample data set of sensor location data, that I will be processing with this parse payload Javascript function to parse-out the latitudes and longitudes for the locations from my various sensors’ payloads. This sample data is from a LoRaWAN connected sensor. Notice that there are LAT and LON values already visible in the data. The LrrLON and LrrLAT values are part of the standard LoRaWAN spec to relay the location of the radio receiver (aka gateway) that received the sensor transmission. You may map this location as well if you like.

In the sample location data, DevEUI_uplink.payload_hex is the actual sensor location that you can parse into usable LAT, LON values using the ‘parse payload’ Javascript function by passing in the hexadecimal value. Once you parse the latitude and longitude data successfully, proceed to Step 3.

Step 3: The Magic with the Map

You can do this in a very simple HTML file. You will need a div to show your map on the page.

 div id=”map”

Following is the Javascript code that you will need. Add your Google Maps Javascript API key created in Step 1 for the source link by replacing ‘YOUR_API_KEY’ in the code. The comments tell what each part of the code is doing.

(insert open script tag)

    function initMap() {

        //create an empty array to add all locations

        var locationsDataArray = [];

        //your lats, longs go here! put as many as you want…

        locationsDataArray.push({lat: 39.953660, lng: -75.189459});

        locationsDataArray.push({lat: 39.955087, lng: -75.188783});

        //choose the center for your map

        var centerLatLng = {lat: 39.955854, lng:  -75.187560};

        //create the map

        var map = new google.maps.Map(document.getElementById(‘map’), {

          zoom: 4,

          center: centerLatLng

        });

        //loop through your array to create markers on the map for each one

        locationsDataArray.forEach(function(location){

               //create new marker

          var marker = new google.maps.Marker({

          position: new google.maps.LatLng(location.lat, location.lng),

          map: map,

          title: ‘Sensors Locations Data!’

          });

        })

(insert close script tag)

Here is a working HTML file that is ready to use.
sensorsLocationsDataMap.html 

Now, that was very simple to do, right?! If you are looking for a more useful, powerful and complex use case, we’ll cover that in Part III of our Smart City series soon. Keep an eye for it!!

Resources:

Sample sensor location data
Parse Payload Function
Full code

References:
https://developers.Google.com/maps/documentation/Javascript/
https://developers.Google.com/maps/documentation/Javascript/examples/marker-simple

Tamanna Chawla Chopra is a Software Engineer at Microshare Inc