D3 Examples - Megalagrion

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>Megalagrion</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 19.13597, lng: -155.61238};
        
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
       function initMap() {
        var ulurub = {lat:19.12566 , lng:-155.61119 };
        
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: ulurub
        });
        var marker = new google.maps.Marker({
          position: ulurub,
          map: map
        });
      }
      d3.json("megalagrion.json", 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("population", "thorax hex");
​
    // 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(d3.entries(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.key; });
​
      function transform(d) {
        d = new google.maps.LatLng(d.value[1], d.value[0]);
        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);
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLg0gAlCALjZduIshgT92Qg9eqnAbG9HY&callback=initMap">
    </script>
  </body>
</html>
​
    