Maps & Location Data

Announcements

HACKTCNJ15 $15.00 promo code – courtesy of Kerrin and HackTCNJ
Twilio Cookbook – courtesy of Kerrin and HackTCNJ
Next week, March 2 – Data: Databases & APIs, User Personas & User Stories
March 12, Initial User Personas & User Stories due
March 23 – Project Vision Documents will be due after we return from Spring Break

Partner Interviews

1000 Hills Community Helpers
CEWOD
TICAH Status
DramAide Status

Maps

Maps are a kind of infographic, they can communicate a great deal of data visually. They’re also great for presenting data in layers.

As an aside, aligning data can be challenging, and, because of the challenges of projecting spherical geographic data onto flat surfaces, can be distorted:

The True Size of Africa

Download the source code for this week’s examples from the class Github Organization.
Unzip the repository on your local machine and upload the contents to a new folder in the ‘www’ folder on your TCNJ web account.
Let’s try out the examples one by one.

Leaflet.js

Leaflet.js is an open-sourced Javascript mapping library. Because it is open-sourced, it is ideal for open or non-for-profit applications. Let’s take it for a test drive:

Basic Map

After you’ve uploaded the basic_map.html file to your TCNJ web account, fire up a web browser and point it to the file: http://www.tcnj.edu/~username/directory/basic_map.html
What happened?

<!-- basic_map.html -->

<!doctype html>
<html lang="en">
 
 <head>
 <meta charset="utf-8">
 <title>Hello Leaflet!</title>
 
 <!-- link in the leaflet.js style sheet -->
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
 
 <style>
 #map { 
 height: 650px; 
 margin: 0 auto;
 }
 </style> 
 
 </head>
 
 <body>
 <div id="map"></div>
 
 <!-- link in the leaflet.js library -->
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <script>
 
 // initialize our map
 var map = L.map('map').setView([40.268835, -74.78091], 13);
 
 // layer in the base map tile
 L.tileLayer('http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);
 
 </script>
 </body>
</html>

Adding Markers

Ok. now let’s tweak our Javascript a bit and layer in some additional information:

After you’ve uploaded the markers_map.html file to your TCNJ web account, fire up a web browser and point it to the file: http://www.tcnj.edu/~username/directory/markers_map.html
What happened?

<!-- markers_map.html -->

 <script>
 // initialize our map
 var map = L.map('map').setView([16, -24], 3);
 
 // add a MapQuest tile layer
 L.tileLayer('http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);
 
 // Add markers
 
 // TCNJ
 L.marker([40.268835, -74.78091]).addTo(map)
 .bindPopup('<a href="http://www.tcnj.edu" title="TCNJ Website" target="_blank">Go Lions!</a>"');
 // TICAH 
 L.marker([-1.3154995, 36.695187]).addTo(map)
 .bindPopup('<a href="http://ticahealth.org/index.htm" title="TICAH Website" target="_blank">TICAH!</a>');
 // 1000 Hills Community Helpers 
 L.marker([-29.7562074, 30.7433415]).addTo(map)
 .bindPopup('<a href="http://www.1000hch.co.uk/Default.aspx" title="1000 Hills Community Helpers Website" target="_blank">1000 Hills Community Helpers</a>');
 // CEWOD 
 L.marker([-5.0904712, 39.093979]).addTo(map)
 .bindPopup('<a href="http://cewod.org/" title="CEWOD Website" target="_blank">Women Center for Communication and Development</a>');
 </script>

Getting Marker Data from Files

Now let’s tweak our Javascript some more, pulling in our marker data from a file:

After you’ve uploaded the data_map.html and map_data.txt files to your TCNJ web account, fire up a web browser and point it to the file: http://www.tcnj.edu/~username/directory/data_map.html
What happened?

<!-- data_map.html -->

 <script>
 
 // initialize our map, centered somewhere around the Cape Verde Islands
 var map = L.map('map').setView([16, -24], 3);
 
 // add a MapQuest tile layer
 L.tileLayer('http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap</a>'
 }).addTo(map);
 
 // get our data from file using Ajax
 var xmlhttp =new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 
 // split up the text file by line
 var lines = xmlhttp.responseText.split('\n');
 for(var line = 0; line < lines.length; line++){
 
 // and split each line by coma
 var vals = lines[line].split(",");
 for(var val=0; val<vals.length; val++){
 console.log(vals[val]);
 }
 
 // place the markers
 L.marker([parseFloat(vals[1]), parseFloat(vals[2])]).addTo(map)
 .bindPopup(vals[0]);
 }
 }
 }
 xmlhttp.open("GET","map_data.txt",true);
 xmlhttp.send(); 
 
 </script>

# map_data.txt

TCNJ,40.268835,-74.78091
TICAH,-1.3154995,36.695187
1000 Hills Community Helpers,-29.7562074,30.7433415
Women Center for Communication and Development,-5.0904712,39.093979

Twilio Location Data

It turns out Twilio supplies additional data about callers in the TwiML request variables. Let’s take a minute to look at the Twilio Documentation.

Understanding these options, let’s see what we can get:

Twilio SMS Location Variables Example

After you’ve uploaded the sms_location_vars.php and data.txt files to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Message request url for your number to point to ‘sms_location_vars.php’.
SMS your Twilio number with any message. Make sure you’ve set the file permissions on data.txt to 666.
What happened?
Now point your web browser to http://www.tcnj.edu/~your-user-name/your-folder/data.txt
What do you see?

// sms_location_vars.php

<?php
 // we can get the number of the sender using the 'Fromn' request value
 $from = $_REQUEST['From'];
 $city = $_REQUEST['FromCity'];
 $state = $_REQUEST['FromState'];
 $zip = $_REQUEST['FromZip'];
 $country = $_REQUEST['FromCountry'];
 $msg = $_REQUEST['Body'];
 
 header("content-type: text/xml");
 echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
 
 // get the exact time of the response
 $t = time();
 
 // set the timezone
 date_default_timezone_set('America/New_York');
 
 // open a file ponter to write our data
 $fp = fopen("data.txt", "a");
 fwrite($fp, $from . "," . $city . "," . $state . "," . $zip . "," . $country . "," . date("c", $t) . "\n");
 
 // close out file pointer
 fclose($fp);
?>
<Response>
 <Message>Thanks! Here's your phone's area code location: <?php echo $city . ", " . $state . ", " . $zip . ", " . $country; ?></Message>
</Response>

Mapping Locations From SMS

Unfortunately, the location variables Twilio provides aren’t really all that useful. The location data returned turns out to be the location data for the area code, or, more specifically, the phone number’s Numbering Plan Area (NPA). This location data doesn’t change depending on where the caller is calling from.

As a result, we need another solution to capture location data for the actual location of the caller.

After you’ve uploaded the sms_map_data.php, twilio_map.html and twilio_data.txt files to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Voice request url for your number to point to sms_map_data.php. Make sure the twilio_data.txt file permissions are set to 666.
SMS your Twilio number with a coma separated line including a location name, a latitude, and a longitude. Something like “TCNJ,40.268835, -74.78091”.
What happened?
Now point your web browser to http://www.tcnj.edu/~your-user-name/your-folder/twilio_map.html.
What do you see?

// sms_map_data.php

<?php
 // we can get the number of the sender using the 'Fromn' request value
 $from = $_REQUEST['From'];
 $msg = $_REQUEST['Body'];

 header("content-type: text/xml");
 echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

 // break up the message into an array for cleaning
 $msg_arr = explode(",",$msg);

 // remove any extra spaces
 for($i=0; $i<count($msg_arr); $i++){
   $msg_arr[$i] = trim($msg_arr[$i]);
 }
 
 // put it back together as coma separated
 $msg = implode(",",$msg_arr);
 
 // open a file ponter to write our data
 $fp = fopen("twilio_data.txt", "a");
 fwrite($fp, $msg . "\n");
 
 // close out file pointer
 fclose($fp);
?>
<Response>
 <Message>Thanks for the incident report!</Message>
</Response>

Challenge

Break up into your groups and create a Leaflet map based on the the markers_map.html example.
Each member of the group should find the latitude & longitude of a location and place a marker on the map using the appropriate Javascript.
Now, create a new Leaflet map based on the twilio_map.html example, you’ll need to use the sms_map_data.php & twilio_data.txt files as well.
Once you’ve created the system, have each member of you group text in a location in a location name, latitude, longitude format.

Assignment

Reading

Chapter 3, Other Possible Scenarios, in the Freedom Fone User & Advocacy Guide

Partner Organization Interviews and Follow-up Survey

Meet with your team and review your notes from your initial partner interview
Using the secondary & followup questions list from last week, and adding any new questions that have come up as a result of your initial partner interview, refine your TCNJ Qualtrics survey in preparation for submission to your partner organization.

Design Notebook

Create a new page in your Design Notebook and label it “Initial Partner Interview” and today’s date.
Comment on your experience with your initial partner interview. Include your overall impressions, including your partner organization’s top needs you feel your team should address. Based upon this initial interview, what additional details do you feel you need in order to more clearly define your project?
Be prepared to discuss in class next week.

*Assignments are due before class begins on Mondays. Be prepared to present your work in class for discussion.