D3 Examples - with legend added

xxxxxxxxxx
 
<!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: '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);
      
 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>
    