dibujar rutas usando d3 en superposición de google maps

Question

Oct 27, 2012, 09:39 AM

dibujar rutas usando d3 en superposición de google maps

Estoy usando d3.js con google maps en un vano intento de visualizar la cobertura inalámbrica. la idea básica es que cada punto en el mapa representaría un punto de acceso y yo utilizaría un diagrama voronoi desde estos puntos como una aproximación bruta de cobertura, etc.

basado en estomanifestación, tengo los siguientes:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
    <style type="text/css">

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

.stations {
  position: absolute;
}

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

.stations border {
  position: absolute;
 stroke: black;
 stroke-width: 2px;
}

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

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

    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

// create map
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});


var data = [
{ name: 'pt1', lng: -122.28, lat: 38.2 },
{ name: 'pt2', lng: -122.05, lat: 38.0 },
{ name: 'pt3', lng: -122.12, lat: 37.67 },
{ name: 'pt4', lng: -121.82, lat: 37.7 },
{ name: 'pt5', lng: -121.95, lat: 38.38 },
{ name: 'pt6', lng: -121.78, lat: 36.93 },
{ name: 'pt7', lng: -122.25, lat: 37.52 },
{ name: 'pt8', lng: -122.82, lat: 38.5 },
{ name: 'pt9', lng: -121.92, lat: 37.37 },
{ name: 'pt10', lng: -122.37, lat: 37.62 },
{ name: 'pt11', lng: -121.23, lat: 37.9 },
]


// Load the station data. When the data comes back, create an overlay.
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("height", "100%")
        .attr("width", "100%")
        .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:svg")
        .each(transform)
        .attr("class", "marker")

    marker.append("svg:circle")
        .attr("r", 4.5)
        .attr("cx", padding )
        .attr("cy", padding );

    // add a label.
    marker.append("svg:text")
        .attr("x", padding + 7)
        .attr("y", padding)
        .attr("dy", ".31em")
        .text( function(d) { 
          return d.name; }
        );

    var v = d3.geom.voronoi( translate(data) );
    // console.log( v )

    var edges = layer.selectAll("path")
        .data( v )
      .enter().append("svg:svg")
        .attr( "class", "border" )
        .append("svg:path")
        .attr( "d", function(d){
          var e = transform_path(d)
          var p = 'M' + e.join('L') + 'Z'
          console.log( 'PATH: ' + p)
          return p
        })

    function translate(data) {
      var d = []
      for( var i=0; i<data.length; i++){
        var c = [ data[i].lat, data[i].lng ]
        d.push( c )
      }
      return d
    }

    function _projection( lat, lng ) {
      e = new google.maps.LatLng( lat, lng );
      e = projection.fromLatLngToDivPixel(e);
      return [ e.x - padding, e.y - padding]
      // return [ e.x, e.y ]
    }

    function transform(d) {
      e = _projection( d.lat, d.lng )
      console.log("marker " + d.lat +', ' + d.lng + " -> left: " + e[0] +", top: " + e[1] )
      return d3.select(this)
          .style("left", e[0] + "px")
          .style("top", e[1] + "px");
    }

    function transform_path(data) {
      var d = []
      console.log(data)
      for( var i=0; i<data.length; i++) {
        var c = _projection( data[i][0], data[i][2] )
        console.log( ' path point: ' + JSON.stringify(data[i]) + ' -> left: ' + c[0] + ", top: " + c[1])
        d.push( c )
      }
      // console.log(d)
      return d
    }

  };
};

// Bind our overlay to the map…
overlay.setMap(map);

    </script>
  </body>
</html>

Sin embargo, no puedo obtener ninguno de los elementos de ruta que aparecen. ¿Alguien puede ayudar? Tengo el código de arriba enjsfiddle. ¡aclamaciones!