rasou2ba · April 11, 2017 13:31
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.json b/data.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta name="viewport" content="intial-scale=1.0, user-scalable=no"/>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>  
  <style>
    body
    {margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } 
    #map {position:absolute;width: 100%;height: 100%; }
    #mapid {height: 180px;}
 		
    #legend {font-family: Arial, sans-serif;background: #fff;padding: 10px;margin: 10px; border: 3px solid #000;}
    #legend h3 {margin-top: 0;}
 		#legend img {vertical-align: middle;}
  
  </style>

  <link rel="stylesheet" href="/maps/documentation/javascript/demos/demos.css">
 	
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkEjkS9E2RAIJodE6gFHseUQx8_Cx2AiE&callback=initMap"
    async defer></script>

 </head>

 <body>
  
  <div id="map"></div>
 	<div id="legend">
    <h3>Legend</h3>
  </div>
  
  <script>

 //Creates Google Maps Background
    function initMap() {
        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: 
          {lat: 38.434084, lng: -78.864970},
          scrollwheel: true,
          zoom: 30,
        	mapTypeId: "satellite",
          //rotates the map
          heading: 60,});
 
 //Makes a variable for each icon annd has specified info (name, url)       
      var icons = {
       	parking: {
        name: 'Trees',
       	icon:'https://www.iconexperience.com/_img/g_collection_png/standard/32x32/tree.png'
          },
       	library: {
        name: 'flower',
        icon: 'http://www.free-emoticons.com/files/kids-emoticons/10519.png'},
       
        info: {
        name: 'bush',
        icon: 'https://vignette3.wikia.nocookie.net/tinymonsters/images/c/c2/Quest_icon_small_bush_debris%402x.png/revision/latest?cb=20120924140142'}
        };

   //the markers access these features for information. 
      //  var features = [
      //    {position: new google.maps.LatLng(38.434084, -78.864970),
      //      type: 'info'},  
      //    {position: new google.maps.LatLng(38.436084, -78.864970),
       //     type: 'parking'}, 
      //    {position: new google.maps.LatLng(38.437084, -78.864970),
      //      type: 'library'}];

    // Create markers for each of the featurs above. It loops through each feature and and creates a marker with the specified position, and type, which is defined above.
        //features.forEach(function(feature) {
         // var marker = new google.maps.Marker({
         //   position: feature.position,
         //   icon: icons[feature.type].icon,
         //   map: map});
      //  });
      
 //For the legend. It accesses the legend div (at top) and appends things to it. Maybe this is where checkboxes should go?
        var legend = document.getElementById('legend');
        for (var key in icons) {
          var type = icons[key];
          var name = type.name;
          var icon = type.icon;
          var div = document.createElement('div');
          div.innerHTML = '<img src="' + icon + '"> ' + name;
          legend.appendChild(div);}

        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
      
 d3.json("data.json", function(err, data) {
    var plots = d3.select("body").selectAll("plots")	
    .data(data.features) 
    .enter()
    .each(function(d) {
    
    	var rectangle = new google.maps.Rectangle({
          strokeColor: 'black',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: function () {            
            if (d.Treatment == "Compost") 
            {return "brown";}
            else if (d.Treatment == "Natural") 
            {return "green"}},
         	fillOpacity: 0.3,
          map: map,
          bounds: {
            north: +d.Latitude,
            south: +d.Latitude - 0.00012,
            east: +d.Longitude,
            west: +d.Longitude - 0.00012}})})})
    }
 

  </script>
 
 </body>
	<!DOCTYPE html>
	<head>
	<meta name="viewport" content="intial-scale=1.0, user-scalable=no"/>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body
	{margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#map {position:absolute;width: 100%;height: 100%; }
	#mapid {height: 180px;}

	#legend {font-family: Arial, sans-serif;background: #fff;padding: 10px;margin: 10px; border: 3px solid #000;}
	#legend h3 {margin-top: 0;}
	#legend img {vertical-align: middle;}

	</style>

	<link rel="stylesheet" href="/maps/documentation/javascript/demos/demos.css">

	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkEjkS9E2RAIJodE6gFHseUQx8_Cx2AiE&callback=initMap"
	async defer></script>

	</head>

	<body>

	<div id="map"></div>
	<div id="legend">
	<h3>Legend</h3>
	</div>

	<script>

	//Creates Google Maps Background
	function initMap() {
	// Create a map object and specify the DOM element for display.
	var map = new google.maps.Map(document.getElementById('map'), {
	center:
	{lat: 38.434084, lng: -78.864970},
	scrollwheel: true,
	zoom: 30,
	mapTypeId: "satellite",
	//rotates the map
	heading: 60,});

	//Makes a variable for each icon annd has specified info (name, url)
	var icons = {
	parking: {
	name: 'Trees',
	icon:'https://www.iconexperience.com/_img/g_collection_png/standard/32x32/tree.png'
	},
	library: {
	name: 'flower',
	icon: 'http://www.free-emoticons.com/files/kids-emoticons/10519.png'},

	info: {
	name: 'bush',
	icon: 'https://vignette3.wikia.nocookie.net/tinymonsters/images/c/c2/Quest_icon_small_bush_debris%402x.png/revision/latest?cb=20120924140142'}
	};

	//the markers access these features for information.
	// var features = [
	// {position: new google.maps.LatLng(38.434084, -78.864970),
	// type: 'info'},
	// {position: new google.maps.LatLng(38.436084, -78.864970),
	// type: 'parking'},
	// {position: new google.maps.LatLng(38.437084, -78.864970),
	// type: 'library'}];

	// Create markers for each of the featurs above. It loops through each feature and and creates a marker with the specified position, and type, which is defined above.
	//features.forEach(function(feature) {
	// var marker = new google.maps.Marker({
	// position: feature.position,
	// icon: icons[feature.type].icon,
	// map: map});
	// });

	//For the legend. It accesses the legend div (at top) and appends things to it. Maybe this is where checkboxes should go?
	var legend = document.getElementById('legend');
	for (var key in icons) {
	var type = icons[key];
	var name = type.name;
	var icon = type.icon;
	var div = document.createElement('div');
	div.innerHTML = '<img src="' + icon + '"> ' + name;
	legend.appendChild(div);}

	map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

	d3.json("data.json", function(err, data) {
	var plots = d3.select("body").selectAll("plots")
	.data(data.features)
	.enter()
	.each(function(d) {

	var rectangle = new google.maps.Rectangle({
	strokeColor: 'black',
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: function () {
	if (d.Treatment == "Compost")
	{return "brown";}
	else if (d.Treatment == "Natural")
	{return "green"}},
	fillOpacity: 0.3,
	map: map,
	bounds: {
	north: +d.Latitude,
	south: +d.Latitude - 0.00012,
	east: +d.Longitude,
	west: +d.Longitude - 0.00012}})})})
	}


	</script>

	</body>