Skip to content

Instantly share code, notes, and snippets.

@TylerVaughan
Created April 24, 2018 15:54
Show Gist options
  • Save TylerVaughan/bc5e7d9fa1f1eaa9e39674550a002197 to your computer and use it in GitHub Desktop.
Save TylerVaughan/bc5e7d9fa1f1eaa9e39674550a002197 to your computer and use it in GitHub Desktop.
project
license: mit
population location F color N Elevation
Waiaele 19.1256,-155.61119 G/R 632 863 m
UMHR 19.13597, -155.61238 G/R 187 890 m
Portugese springs 19.12566, -155.61232 G/R 578 871 m
Ninole 19.17733, -155.56105 G 113 652 m
Kulani 19.59458, -155.34122 R 411 1747 m
<!DOCTYPE html>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(19.1256,-155.61119),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
function addMarker(d) {
console.log("d:", d)
contentString= "<h1>" + d.population + "</h1>" +
"<p>" +
"Location: " + d.location + "<br><br>" +
"Female color: " + d["F color"] + "<br><br>" +
"Number: " + d.N + "<br><br>" +
"Elevation: " + d.Elevation + "<br><br>"
"</p>";
latlng = d.location;
latlng = latlng.split(",")
lat = +latlng[0]
lng = +latlng[1]
latlng = new google.maps.LatLng(lat,lng);
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var markerTwo = new google.maps.Marker({
position: latlng,
map: map,
icon: {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
strokeWeight: 1,
scale: .5,
text: "57"
},
label: d.population
})
markerTwo.addListener('click', function() {
infowindow.open(map, markerTwo);
});
}
d3.csv("echteMega.csv", function(error, data) {
if (error) throw error;
console.log(data)
data.forEach(function (d) { addMarker(d)})
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment