TylerVaughan/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## echteMega.csv

          
            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

## index.html
<!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>
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>