derbyth/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from rasou2ba's block: with legend added

  
## data.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              data.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>