Anuj Deshpande
Published © MIT

State of the City

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

BeginnerFull instructions provided2,341
State of the City

Things used in this project

Hardware components

Marvell MW302 IoT Starter Kit
Marvell MW302 IoT Starter Kit
×1
SparkFun Digital Temperature Sensor Breakout - TMP102
SparkFun Digital Temperature Sensor Breakout - TMP102
×1

Software apps and online services

AWS IoT
Amazon Web Services AWS IoT
AWS IoT is used as a gateway for the Internet connected sensors.
AWS S3
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

Read more

Schematics

Temperature-sensor

This is the C code which reads values from the digital temperature sensor. It can also be found on the github repo which is linked.

Schematic

IO_17 and IO_18 are marked on the board.
Red and Black and Vcc and GND respectively.

Setup

This is how my setup looks. 4 wires from the board to the sensor

Schematic

This shows the connection between the temp sensor and the MW302 board

Code

City Map

HTML
An HTML/JS file which uses the Mapbox API to create an OpenStreetMap with a custom data layer. The data is fetched from Amazon S3, which is updated via AWS IoT
<!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>

MCU Firmware

Check out the folder `sample_apps/tmp102/` to find the application code

Credits

Anuj Deshpande

Anuj Deshpande

1 project • 7 followers

Comments

Related channels and tags
  • Amazon Web Services
  • Environmental Sensing
  • Internet of Things
  • Marvell
  • Sensors
  • SparkFun
  • Sustainability