4/11 with legend added

forked from rasou2ba's block: with legend added

<!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;}
  
    html, body, #map {
  		width: 100%;
  		height: 100%;
  		margin: 0;
  		padding: 0;
}

.data, .stations svg {
  		position: absolute;
}

.data svg {
 		 width: 60px;
 		 height: 20px;
  		padding-right: 100px;
  		font: 10px sans-serif;
}

.data circle {
  		fill: brown;
  		stroke: black;
  		stroke-width: 1.5px;
}
  </style>

</head>

<body>
    
  <input type ="checkbox" onclick="USAdots()">United States<br>
  <input type ="checkbox" onclick="Liberiadots()">Liberia<br>
  <input type ="checkbox" onclick="Guineadots()">Guinea<br>
  <button type='button' onclick='uncheckAll()'>Reset</button>
  <button type='button' onclick='checkAll()'>All</button>  
  
  <div id="map"></div>
	<div id="legend">
    <h3>Legend</h3>
  </div>
  
  <script>

var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

// Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;

var marker = layer.selectAll("svg")
          .data(d3.entries(data))
          .each(transform) // update existing markers
        .enter().append("svg")
          .each(transform)
          .attr("class", "marker");

// Add a circle.
      marker.append("circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding);

// Add a label.
      marker.append("text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.key; });

function transform(d) {
        d = new google.maps.LatLng(d.Latitude, d.Longitude);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
      }
    };
  };

// Bind our overlay to the map…
  overlay.setMap(map);
});

//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: 'https://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);

//var svg = d3.select("body").append("svg")
//      	.attr("width", 1000)
//      	.attr("height", 1000);

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

var Group = d3.select("mysvg").selectAll("g")
      	.data(data.features)
      	.enter()
      	.append("svg:g")
      Group.append("rect")
      	.attr("x", 50)
      	.attr("y", 50)
      	.attr("width", 50)
      	.attr("height", 50)
      	.attr("fill", "black")
      console.log(Group)
//      console.log(svg)
      
    	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>

https://d3js.org/d3.v4.min.js