BMPMS · March 28, 2017 12:07
diff --git a/hygiene.css b/hygiene.css
 table,th,td {
  font-family: Roboto;
  font-size: 22px;
  border: 1px solid black;
  width: 100%;
 }
 #my_map {
  width: 100%;
  height: 600px;
  margin: 0;
  padding: 0;
  background-color: pink;
 }

 .tooltip, .tooltip_map{
  width: auto;
  height: auto;
  text-align: left;
  visibility: hidden;
  position: absolute;
  border: 1px solid grey;
  padding: 5px;
  font: 10px sans-serif;
  background: white;
  border-radius: 4px;
  pointer-events: none;
 }

 #tally,#map_td{
  width: 50%;
  height: 600px;
 }
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Map Issues</title>
    <link rel="stylesheet" href="hygiene.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="test_functions.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGcQ0ByJtq6K-sgCOu98Twk4K7nchHrQ8"></script>
  </head>
  <body>
    <table>
    <tr><td id='map_td'><div id="my_map"></div></td></tr>
    </table>
  </body>
 </html>

diff --git a/map_test.csv b/map_test.csv
diff --git a/test_functions.js b/test_functions.js
 d3.csv("map_test.csv", function(error, data) {

  //2. Apply filters
  my_list = data
  my_list = my_list.slice(0, 2);
  var bound = new google.maps.LatLngBounds();
  for (m in my_list){
    long = +my_list[m].Longitude
    lat = +my_list[m].Latitude
    if(isNaN(my_list[m].Longitude)==true || (long==0 && lat==0)){
      my_list.splice(m,1)
    } else{
      bound.extend(new google.maps.LatLng(lat, long));
    }
  }

  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  d3.select('#my_map')
    .attr("width",width/2);


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


    google.maps.event.addListenerOnce(map, 'idle', function() {
        map.fitBounds(bound);
    });


  debugger;


  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().overlayMouseTarget).append("div")
        .attr("class", "hygiene");

    // 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 = 0;

    var tooltip = d3.select("body")
                    .append("div")
                    .attr("class", "tooltip_map")
                    .html("");

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

      // Add a circle.
      marker.append("circle")
            .attr("r", 5)
            .attr("cx", padding+5)
            .attr("cy", padding+5)
            .on("mouseover", function(d){
              //sets tooltip.  t_text = content in html
                t_text = d.BusinessName + ": " + d.RatingValue + ": " + d.Longitude + "," + d.Latitude
                tooltip.html(t_text)
                return tooltip.style("visibility", "visible");})
            .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
            .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

            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);
 });
	table,th,td {
	font-family: Roboto;
	font-size: 22px;
	border: 1px solid black;
	width: 100%;
	}
	#my_map {
	width: 100%;
	height: 600px;
	margin: 0;
	padding: 0;
	background-color: pink;
	}

	.tooltip, .tooltip_map{
	width: auto;
	height: auto;
	text-align: left;
	visibility: hidden;
	position: absolute;
	border: 1px solid grey;
	padding: 5px;
	font: 10px sans-serif;
	background: white;
	border-radius: 4px;
	pointer-events: none;
	}

	#tally,#map_td{
	width: 50%;
	height: 600px;
	}
	<html>
	<head>
	<title>Map Issues</title>
	<link rel="stylesheet" href="hygiene.css">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="test_functions.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGcQ0ByJtq6K-sgCOu98Twk4K7nchHrQ8"></script>
	</head>
	<body>
	<table>
	<tr><td id='map_td'><div id="my_map"></div></td></tr>
	</table>
	</body>
	</html>
BusinessName	Latitude	Longitude
3-2-4 Play Group	51.409393	-2.485843
4 West Cafe	51.38045	-2.330685
55a North Road	51.361778	-2.34803
7 Day Catering Ltd	51.356009	-2.370346
Abbey Rectory Bed And Breakfast	51.389954	-2.337192
Acorn Vegetarian Kitchen	51.380764	-2.358548
	d3.csv("map_test.csv", function(error, data) {

	//2. Apply filters
	my_list = data
	my_list = my_list.slice(0, 2);
	var bound = new google.maps.LatLngBounds();
	for (m in my_list){
	long = +my_list[m].Longitude
	lat = +my_list[m].Latitude
	if(isNaN(my_list[m].Longitude)==true \|\| (long==0 && lat==0)){
	my_list.splice(m,1)
	} else{
	bound.extend(new google.maps.LatLng(lat, long));
	}
	}

	var width = window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth;

	d3.select('#my_map')
	.attr("width",width/2);


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


	google.maps.event.addListenerOnce(map, 'idle', function() {
	map.fitBounds(bound);
	});


	debugger;


	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().overlayMouseTarget).append("div")
	.attr("class", "hygiene");

	// 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 = 0;

	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip_map")
	.html("");

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

	// Add a circle.
	marker.append("circle")
	.attr("r", 5)
	.attr("cx", padding+5)
	.attr("cy", padding+5)
	.on("mouseover", function(d){
	//sets tooltip. t_text = content in html
	t_text = d.BusinessName + ": " + d.RatingValue + ": " + d.Longitude + "," + d.Latitude
	tooltip.html(t_text)
	return tooltip.style("visibility", "visible");})
	.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
	.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

	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);
	});