Hillside Project 4/25/17

forked from jaegerka's block: Hillside Project 4/11/17

<!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>

</head>

var legend = document.getElementById('legend');   
    
 //Creates Google Maps Background
    
    function initMap() {
        // Create a map object and specify the DOM element for display.
   map = new google.maps.Map(document.getElementById('map'), {
          center: 
          {lat: 38.434024, lng: -78.865000},
          scrollwheel: false,
          zoom: 30,
     zoomControl: false,
     scaleControl: true,
        	mapTypeId: "satellite",
          //rotates the map
          heading: 60,}
          );
 
d3.json("data.json", function(err, data) {
  console.log("data:", data) 
  var plots = d3.select("body").selectAll("plots")	
    .data(data.features) 
    .enter()
    .each(function(d) {
    	if (d.Treatment == "Compost") {
        var rectangle = new google.maps.Rectangle({
          strokeColor: 'black',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#654321",
         	fillOpacity: 1.0,
          map: map,
          bounds: {
            north: +d.Latitude,
            south: +d.Latitude - 0.00014,
            east: +d.Longitude,
            west: +d.Longitude - 0.00014}})
        }
    	
      else if (d.Treatment == "Natural") {
        var rectangle = new google.maps.Rectangle({
          strokeColor: 'black',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "green",
         	fillOpacity: 1,
          map: map,
          bounds: {
            north: +d.Latitude,
            south: +d.Latitude - 0.00014,
            east: +d.Longitude,
            west: +d.Longitude - 0.00014}})}

function label(){
        var myLatlng = new google.maps.LatLng(d.Latitude - 0.000075, d.Longitude)
        var labelIndex = 2 
        var marker = new google.maps.Marker({
   				position: myLatlng,
    			label: d.ID,
          icon: 'https://s7d2.scene7.com/is/image/DesignWithinReach/COLOR_white?$swatch$'
          })
        var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+'<div id="bodyContent">'+
        '<p><b>Plot Data</b> </p>'+
        '</div>'+'</div>';
    
    var infowindow = new google.maps.InfoWindow({
          content: contentString + "Plot ID: " + d.ID + "<br/>" + "Treatment: " + d.Treatment + "<br/>" + "Coordinates:      " + "(" + d.Latitude + "," + d.Longitude + ")" })
    marker.addListener('click', function() {
       infowindow.open(map, marker);})
        marker.setMap(map)}
         
    label()

})})
	
    
console.log(d3.select('input').select('nutrient'))      
 
      
 
//For the legend. It accesses the legend div (at top) and appends things to it. Maybe this is where checkboxes should go?

for (var key in icons) {
          var type = icons[key];
          var name = type.name;
          var icon = type.icon;
          var div = document.createElement('div');
          div.innerHTML = '<input type= "button" onclick="uncheckAll()"> + "Uncheck">'
  				if (name == "Plant Data") {
  				div.innerHTML = '<input type = "checkbox" onclick="plants()">' + name +'<img src="' + icon + '"> ' }
  				else if (name == "Insect Data") {
            div.innerHTML = '<input type = "checkbox" onclick="insects()">' + name +'<img src="' + icon + '"> ' 
          }
  			else if (name == "Soil Moisture") {
          div.innerHTML = '<input type = "checkbox" onclick="soilmoisture()" id: "soil">'  + name +'<img src="' + icon + '"> ' 
        }
          else if (name == "Nutrient Content") {
          div.innerHTML = '<input type = "checkbox" onclick="nutrients()" id: "nutrient">'  + name +'<img src="' + icon + '"> ' 
        }
  				else if (name == "Cation Exchange Capacity") {
          div.innerHTML = '<input type = "checkbox" onclick="cations()" id: "CEC">'  + name +'<img src="' + icon + '"> ' 
        }
  				else if (name == "pH") {
          div.innerHTML = '<input type = "checkbox" onclick="pH()" id: "pH">'  + name +'<img src="' + icon + '"> ' 
        }
  			else if (name == "Soil Composition") {
          div.innerHTML = '<input type = "checkbox" onclick="Composition()" id: "Composition">'  + name +'<img src="' + icon + '"> ' 
        }
  else if (name == "Soil Compaction") {
          div.innerHTML = '<input type = "checkbox" onclick="Pressure()" id: "Composition">'  + name +'<img src="' + icon + '"> ' 
        }
          legend.appendChild(div);}
        
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legend);
    console.log("icons:", icons)
    
    
    
    }
    
 var icons = {	
   		
   InsectData: {
        name: 'Insect Data',
        icon:  'https://findicons.com/files/icons/2428/woocons/32/bug.png', },
      PlantData: {
          name: 'Plant Data',    			
          icon:'https://www.happy-leaf.jp/favicon.ico'},
   Composition: {
   			name: 'Soil Composition',
        icon: 'https://minecraft.novaskin.me/images/minecraft.png'},   	
         SoilMoisture: {
        name: 'Soil Moisture',
        icon: 'https://cdn2.iconfinder.com/data/icons/weather-flat-icons-2/320/7-32.png'},
    Pressure: {
        name: 'Soil Compaction',
        icon: 'https://static3.industrybuying.com/navigation/161209testing-measuring.png'
      },
   Cations: {
   			name: 'Cation Exchange Capacity',
   			icon: 'https://pnga.mypng.cn/2333/plus-sign.png.1.png' }, 
   NutrientContent: {
        name: 'Nutrient Content',
        icon: 'https://air.utah.gov/images/CircleGraphIcon2.png'},
   		
   pH: {
        name: 'pH',
        icon: 'https://air.utah.gov/images/CircleCurrentIcon2.png'
      },
  
   
 
 }

function plants() {
   
    d3.json("data.json", function(err, data) {
      var images = d3.select("body").selectAll("images")	
          .data(data.features) 
          .enter()
          .each(function(d) {  
             var features = [
               {position: new google.maps.LatLng(d.Latitude - 0.000075, d.Longitude - 0.000065),
                 type: 'PlantData'},]
     features.forEach(function(feature) {
        var marker = new google.maps.Marker({
          size: new google.maps.Size(10,10),
          position: feature.position,
           icon: icons[feature.type].icon,
                map: map,})

function Pressure() {
    d3.json("data.json", function(err, data) {
      var images = d3.select("body").selectAll("images")	
          .data(data.features) 
          .enter()
          .each(function(d) {  
            var features = [
              {position: new google.maps.LatLng(d.Latitude - 0.000025, d.Longitude - 0.000065),              
          		  type: 'Pressure'},]
             console.log("Pressire checked")
          features.forEach(function(feature) {
              var marker = new google.maps.Marker({
                position: feature.position,
                icon: icons[feature.type].icon,
                anchor: new google.maps.Point(feature.position),
                map: map,})
              
    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+'<div id="bodyContent">'+
        '<p><b>Pressure via Penetrometer</b> </p>'+
        '</div>'+'</div>';
    
    var infowindow = new google.maps.InfoWindow({
          content: contentString + d.CM + "cm" + "<br/>" +  d.PSI + "psi" })
    marker.addListener('click', function() {
       infowindow.open(map, marker);}) 
              })   
          })})
     
    console.log("showing pressure")}

</script>
 
</body>

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