JSFiddle - React, Tailwind, and code Playground

by Patricia Warwick

CSS

svg {
  border:0px solid #ebebeb;
}
.members, .members svg {
position: absolute;
}
 
.members svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
 
.members circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}

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

JavaScript

var cx; var cy;
var width  = 1000;
var height = 800;

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map") .node(), {
    zoom: 111, // was 11
    center: new google.maps.LatLng(43.7, -79.4),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
); // end new map

var circles;
var imageAttributes = {height:32, width:32, x:-16, y:-16};

d3.json("/mydrupal/sites/default/d3_files/json/members google.json?nocache=" + (new Date()).getTime(),function(error,data) 
{
  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", "members"); // end var layer
    // 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; // end var projection
      var marker = layer.selectAll("svg")
          .data(d3.entries(data))
          .each(transform) // update existing markers
        .enter()
          .append("svg:svg")
          .each(transform)
          .attr("class", "marker"); // end var marker
      // Add a circle.
      marker.append("svg:circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding); // end marker append circle
      // Add a label.
      marker.append("svg:text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { 
// console.log(d.key); correct
                return d.key; 
               }); // end text and marker append

      function transform(d) {
        d = new google.maps.LatLng(d.value[0], d.value[1]);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
       }...