Published February 16, 2016 © MIT

State of the City

State of the City creates a map of your city using crowdsourced data

BeginnerFull instructions provided2,341

Things used in this project

Hardware components

Marvell MW302 IoT Starter Kit

SparkFun Digital Temperature Sensor Breakout - TMP102

Software apps and online services

Amazon Web Services AWS IoT

AWS IoT is used as a gateway for the Internet connected sensors.

Amazon Web Services AWS S3

AWS S3 is used to store the sensor readings as well as to host a static web page to show the map

Mapbox

Mapbox JS API is used to create a custom map based on OpenStreetMaps.

Story

State of the city

This project aims to create an easy and lightweight platform to get readings from sensors located in different parts of the city.

Objective

Get environment variables from devices located in different parts of a city.

The sensors will be of the following types :

temperature
pressure
co2
precipitation

I think this is the easiest method for gathering city wide data which does not require server side hosting. The page can be made completely static by leveraging the power of S3 and AWS IoT. As a result it can be embedded anywhere without burdening a single server box.

In this writeup, I have only demonstrated the use of a temperature sensor. The cloud connection code and HTML/JS code will remain the same for all additional sensors.

Hardware

Amazon powered MW302 IoT Starter kit
Sparkfun digital temperature sensor

Tech stack

Steps

Step 1 : Create a Thing using your AWS IoT Dashboard

Login to your AWS account and go to the IoT service. Create a new thing, by selecting the Embedded C option. Download the keys that are generated in the process.

If you get stuck in this workflow, you can refer this article. I even made a small video of how to do this. You can find it on my channel called Makerville.

Create a new thing in AWS IoT

Step 2 : Configure device

If you are using the same sensor as me, you can find the mcu application code in the software section below. All you need to do is compile and upload it to the device.

If you are new to the MW302 platform, you can find instructions on host setup and flashing on their wiki

http://github.com/marvell-iot/aws_starter_sdk/wiki

I made a detailed video of how to setup a MW302 device to connect to AWS IoT. You can find it on my channel called Makerville.

Connect to AWS IoT

Step 3 : Create bucket on S3

Login to your AWS account and go to the S3 service. Create a new bucket and name it accordingly. I have named mine as stateofthecity.

Step 4 : Edit CORS configuration of bucket

To make the content of the bucket available publicly, we will have to make changes to the CORS configuration. I have attached a screenshot of the changes that you need to make below.

Required changes to CORS to make things visible publicly

Step 5 : Set rule on AWS IoT

Next we are going to configure a thing to push content to the just create bucket. This is done using the awesome Rules Engine.

The Rules Engine allows you to select a topic, parse the event generated by it and then link it to any AWS Service.

I have attached a screenshot of the rule for reference.

Create a rule to push to S3

Step 6 : Host HTML

S3 is amazing. You can use the same bucket that you created earlier to host a static HTML file which fetches the data from S3. Pretty cool right?

My static webpage for the promising city of Pune, India is hosted on

http://stateofthecity.s3-website-us-west-2.amazonaws.com/

Set index.html to statically hosted

We could have used AWS SDK for JS to directly connect it to AWS IoT, instead of using S3 as a go-between. The reason I chose not to do it is because that would mean me posting my access keys and tokens in the public (recipe for disaster!).

Hence the data is fetched from publicly accessible S3 objects :

$.get( "https://s3-us-west-2.amazonaws.com/stateofthecity/thing1.json", function( data ) ...

The JSON data is then parsed to find the value

var d = JSON.parse(data);
  window.thing1 = String(d.state.reported.temperature);

The complete HTML/JS code is attached in the software section below.

My Smart city

Thats it !

We are done ! Quick and easy. There is so much more to do with this ! Think of the many sensors that could be connected

A quick recap of the flow :

1. Create a Thing using your AWS IoT Dashboard

2. Configure device

3. Create bucket on S3

4. Edit CORS configuration of bucket

5. Set rule on AWS IoT

6. Host HTML

Code

City Map

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>State of the City</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<meta name="description" content="Hackster Amazon IoT Contest entry : State of the City creates a map of your city using crowdsourced data " />
<meta name="author" content="Anuj Deshpande"/>
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<!-- <script src='https://sdk.amazonaws.com/js/aws-sdk-2.2.28.min.js'></script> -->
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>

<body>

<div id='map'></div>

<script>
var thing1 = 'na';
var thing2 = 'na';
getstuff();



function getstuff(){

  $.get( "https://s3-us-west-2.amazonaws.com/stateofthecity/thing1.json", function( data ) {
    var items = [];
    data = data.replace('\0','');
    // data = JSON.parse(data);
    var d = JSON.parse(data);
    // console.log(d.state.reported.temperature);
    window.thing1 = String(d.state.reported.temperature);
  });



$.get( "https://s3-us-west-2.amazonaws.com/stateofthecity/thing2.json", function( data ) {
  var items = [];
  data = data.replace('\0','');
  // data = JSON.parse(data);
  var d = JSON.parse(data);
     window.thing2 = String(d.state.reported.temperature);

});

setTimeout(function(){ domapbox(); }, 5000);

};

function domapbox(){

L.mapbox.accessToken = 'pk.eyJ1IjoiYW51amRlc2hwYW5kZSIsImEiOiJjaWZ6NXpoM2E1cDFjdXdrcnF0eHU0MHA2In0._Sm9QJXwbZPEreM7tlQlAQ';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([18.5, 73.9], 9);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
          73.894818,
          18.5504573
        ]
    },
    properties: {
        title: 'Thing1',
        description: window.thing1,
        'marker-size': 'large',
        'marker-color': '#BE0000',
        'marker-symbol': 'commercial'
}
}).addTo(map);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
          73.828327,
          18.526307
        ]
    },
    properties: {
        title: 'Thing2',
        description: window.thing2,
        'marker-size': 'large',
        'marker-color': '#BE006B',
        'marker-symbol': 'industrial'
}
}).addTo(map);
};
</script>
</body>
</html>