Mega?

Built with blockbuilder.org

forked from swaggernation77's block: Mega

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

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

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

.marker:hover{
		fill-opacity:0.5;
  }
  #tooltip {   
		position: absolute;           
		margin: 10px;
		font: 12px sans-serif;        
		border: 1px;      
		pointer-events: none;         
	}
	#tooltip h4{
		margin:0;
		font-size:18px;
    color: plum;
	}
	#tooltip{
    position: absolute;           
		margin: 10px;
		font: 14px sans-serif;        
		pointer-events: none;   
		background:rgba(0,0,0,0.9);
		border:1px solid grey;
		border-radius:5px;
		width:auto;
		padding:4px;
		color:white;
		opacity:0;
	}
	#tooltip table{
		table-layout:fixed;
	}
	#tooltip tr td{
		padding:0;
		margin:0;
	}
	#tooltip tr td:nth-child(1){
		width:50px;
	}
	#tooltip tr td:nth-child(2){
		text-align:center;
	}
</style>
<div id="tooltip"></div>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
  function tooltipHtml(n, cases){	/* function to create html content string in tooltip div. */
		return "<h4>"+n+"</h4><table>"+
			"<tr><td>Cases</td><td>"+(N)+"</td></tr></table>";
	}

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(19.1256,-155.61119),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

// Load the station data. When the data comes back, create an overlay.
d3.csv("echteMega.csv", function(error, data) {
  if (error) throw error;

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(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.population; });
      overlay.onAdd = function () {
   
        var layer = d3.select(this.getPanes().overlayMouseTarget)
        .append("div")
        .attr("class", "marker");
   }

function transform(d) {
        //console.log(d);
        latlng = d.location;
        latlng = latlng.split(",")
        lat = +latlng[0]
        lng = +latlng[1]
        //console.log("lat:", lat, "lng:", lng);
        d = new google.maps.LatLng(lat,lng);
        //console.log("d:", d)

d = projection.fromLatLngToDivPixel(d);
                console.log("d:", 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);
});

</script>

https://maps.google.com/maps/api/js?sensor=true

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