Murch samples by pbogden

index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Geocoding service</title>
  <link href="defaultGoogle.css" rel="stylesheet">
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
</head>

<body>
<div id="map"></div>
<div id="my-table"></div>
<script>

var table, map, locationKey = "Location (town) ";

function initialize() {
  var myLatlng = new google.maps.LatLng(38.,-100.);
  var mapOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a table for the results -- First row has the column labels
  table = document.createElement("table");
  row = table.insertRow(0);
  row.insertCell(0).innerHTML = "#";
  row.insertCell(1).innerHTML = "Name";
  row.insertCell(2).innerHTML = "Location";
  row.insertCell(3).innerHTML = "Lat";
  row.insertCell(4).innerHTML = "Lng";
  document.getElementById("my-table").appendChild(table);

  addData();
}

google.maps.event.addDomListener(window, 'load', initialize);

// Add the data
function addData() { 

    d3.csv("Murchsamples2.csv", function(error, data) {

        csv = data;
        if (error != null) { console.log("Error reading CSV file: " + error)}; 
        console.log("# of rows in CSV file: " + data.length);

        // Add rows to the table that will be populated later with Lat & Lng
        data.forEach( function(d,i) {
            var row = table.insertRow(i+1);
            row.insertCell(0).innerHTML = i;
            row.insertCell(1).innerHTML = d["Name"];
            row.insertCell(2).innerHTML = d[locationKey];
            row.insertCell(3).setAttribute("id", i + "Lat");
            row.insertCell(4).setAttribute("id", i + "Lng");
        });

        // Geocode the locations
        data.forEach( function(d,i) {

            // WARNING: geocoding & table population occur asynchronously
            codeAddress(d[locationKey], d["Name"], i);

        });
    });

    // geocode the address and populate the table with lng & lat
    function codeAddress(locationString, nameString, i) { setTimeout( function() {

        var urlString = "//maps.googleapis.com/maps/api/geocode/json?address=",
            sensorString = "&sensor=false",
            request = urlString + escape(locationString) + sensorString;
            console.log("Trying..." + i + ", " + locationString);

        if (locationString == "") { 
           document.getElementById(i + "Lng").innerHTML = location.lng;
           document.getElementById(i + "Lat").innerHTML = location.lat;
           console.log("Returning early"); 
        return; };

        // Create an XHR object
        var xhr = new XMLHttpRequest();
        xhr.open("GET",request,true);

        // Register the XHR event handler -- NOTE: this must be added before xhr.send()
        xhr.addEventListener('load', function() {
            if (xhr.status === 200) {
                var googleResponse = JSON.parse(xhr.response)
                if (googleResponse.status == "OK") {
                    var location = JSON.parse(xhr.response).results[0].geometry.location;
                    console.log(i + ", " + locationString + ", "
                              + location.lat + ", " + location.lng);
                    var latLng = new google.maps.LatLng(location.lat, location.lng);
    
                    // Plot the location on the map
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        title: nameString + ", " + locationString
                    });

                    // Add Lat & Lng to the table
                    document.getElementById(i + "Lng").innerHTML = location.lng;
                    document.getElementById(i + "Lat").innerHTML = location.lat;

                } else {
                    geocodeErrorCount += 1;
                    console.log("ERROR locating " + locationString + "..." + googleResponse.status);
                    console.log("Problematic request #" + geocodeErrorCount + ": " + request);
                };
            } else {
                console.log("XHR Error for " + locationString + ": XHR status: " + status);
            };
        },false); 

        // Send the XHR request
        xhr.send(); 
    }, i*200); };

};

</script>
</body>
</html>

Murchsamples2.csv

Sample #,Name,Grade,Material,Location (town) ,Lattitude,longitude
1,Wesley P.,K,Shark teeth fossils,"Edisto Beach, SC",,
,Ellie P.,2,,,,
2,Ben P.,5,pumice,"Arendah, Norway",,
3,Max V.,4,black sand ,"Pnalu'u Beach, Island of Hawaii",N19d8',W155d30'
4,Mabel C.,1,"schist, fresh water clam, soil","Otisfield, ME",44.11,70.55
,Truett C.,5,,,,
5,Lucy C.,3,pegmatite,"Holderness, NH",43.6,71.5
,Perry C.,,,,,
6,Mrs. T,,quartz pebble,"Lagos, Portugal (Cape Saint Vincent)",,
7,Tilden P.,,red wood tree cones,"Berkely, CA",,
8,Harry M.,K,black chert,"Lummi Island, WA",,
9,Max C.,1,shells,"Inverlock, Victoria Australia",,
10,David M.,K,beach sand,"Small Point, ME",N43d42'74'',W64d50'12''
11,David M.,K,soil,"Richardson, TX",,
12,Zachary H.,3,"beach sand, pebbles","Oceanside, OR",,
13,Zachary H.,3,siltstone,"Antimus, PA",39d21'N,78d 26.125'W
14,Zachary H.,3,shale,"Little Rock, AR",,
15,Zachary H.,3,quartzite,"Worton, MD",39d21.029'N,76d8.105 W
16,Laurelie M.,1,basalt,"Jackson, WY",,
17,Logan M.,3,feldspar,"West Yellowstone, MT",,
18,Sean M.,4,granite,"Vedavwoo, WY",41.24,105.39
19,Ben I.,K,"quartz, shells","Duck, NC",30.026N,75.67W
20,Ben I.,K,shells,"Fripp Island, SC",32.32N,80.48 W
21,,,rhyolite (volcanic),"Mt. Vesuvius, Italy",,
22,,,ceramic shard,"Positano, Italy",,
23,Neil H.,3,quartz pebbles,"Williamsburg, VA",N37d 39.7',W076d 25.15'
24,Emma H.,3,"""butterfly"" rock","Irvinton, VA",N37d 39.69',W076d 25.15'
25,Cole B.,4,"granite ""egg"" rock","Swans Island, ME",,
26,Meredith P.,,soil,"Twin Falls, ID",,
27,Jamie C.,3,"sand, pebbles","Villard, MN",,
28,Jamie C.,3,soil,"Alturas Lake, ID",,
29,Daniel B.,1,slate,,41d 14'N,76d 13'W
30,Ben B.,4,"beach sand, shell, gneiss","Long Island sound, Connecticut",,
31,,,beach rock with quartz vein,"Naragansett, RI",,
32,,,schist,"Lincolnville, ME",,
33,,,coal,"Washington, DC",,
34,Sofia B.,1,barnacle,"Black Rock, CT",41.8N,73.1W
35,Sofia B.,1,rock,"Beaver Creek, CO",39.63 N,106.52W
36,Sofia B.,1,oyster shell,"Warren, RI",41.73N,71.28W
37,Sofia B.,1,quartz pebble,"Boston, MA",42.36N,71.06W
38,Marlowe V.,3,cacao nibs,Costa Rica,9.38,84..145
39,Chris N.,K,"beach sand, granite, bark","St. Joseph, MT",42N,86W
,Matthew N.,K,,,,
40,Lee E.,,"quartz, muscovite","Lake Kezar, ME",,
41,Leo C.,1,"coral, seashells, coconut shell",,"Miami, FL",
42,Van H.,2,schist,"Fenwick Island, DE",,
43,Van H.,3,shell,"Myrtle Beach, SC",,
44,Lilly S.,3,"quartzite, basalt","Albuqurque, NM",35,106
45,Lyna,,schist,"Franconia Notch, NH",,
46,Lyna,,moss,"Welfleet, MA",,
47,Lucas H.,1,pebble,"Rome, Italy",,
48,Lucas H.,2,white beach sand,"St. Simons Island, GA",,
49,Lucy H.,4,shell,"Bethany, DE",,
50,Alec N.,2,beach sand,St. Joseph MT,42N,86W
52,Laila O.,1,"quartz, feldspar, schist","Mill River, MA",42.095,73.27W
53,Jasper O.,2,pebbles,,42.157,73.269
54,Lyna,,shells,"Wellfleet, MA",,
55,Josephine D.,,"gneiss, quartz pebbles",RI,41.5,71.1
56,Ezra C.,3,desert sand,"Sahara, Moracco",,
57,Ezra C.,3,fossilized frog,"China Beach, Vietnam",,
58,Ezra C.,3,desert rose,"Sahara, Moracco",,
59,Ezra C.,3,sea urchin,South Africa (between Cape Town and Port Elizabeth),,

defaultGoogle.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 500px;
  width: 960px;
}

@media print {
  html, body {
    height: auto;
  }

  #map {
    height: 650px;
  }
}

#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}