Drawing lines on a map between long and lat...

nickschurch

unread,

Jul 20, 2016, 8:09:32 AM7/20/16

to d3-js

This is probably a really simple thing to do but I'm struggling with it. Basically I'm trying to combine this example with this example. This is the code I have:

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

</style>
<div id="map"></div>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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


// Load the station data. When the data comes back, create an overlay.
d3.json("http://www.compbio.dundee.ac.uk/user/nschurch/maptest/stations.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("class", "stations");

    var svg = layer.append('svg')
        .attr('x', 0)
        .attr('y', 0)

    var lineFn = d3.svg.line()
        .x(function (d) {
        e = _projection(d[0], d[1]);
        return e[0] + padding
    })
        .y(function (d) {
        e = _projection(d[0], d[1]);
        return e[1] + padding
    })

    // 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)
	  .attr("id", function(d) { return d.key; });

      // Add a label.
      marker.append("text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.value[2]; });

      var line = svg.selectAll('.path').data([data])
        line.enter().append('path')
        line.attr('class', 'path')
            .attr('d', lineFn)

      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");
      }
    };
  };
  // Bind our overlay to the map…
  overlay.setMap(map);

  var svg = d3.selectAll("svg")
        .data(data)
        .enter()
        .append("line")
        .attr("x1", function (d) {
            return d.value[0];
        })
        .attr("y1", function (d) {
            return d.value[1];
        })
        .attr("x2", function (d) {
            return d.value[0];
        })
        .attr("y2", function (d) {
            return d.value[1];
        })
        .style("stroke", "yellow");   
});

</script>

The json looks like:

{"DD":[56.457824,-2.986085,"Dundee Uni"],"KMAE":[36.98,-120.12,"MADERA MUNICIPAL AIRPORT"]}

I'm not new to d3, but I am new to drawing maps with it.... Any help, greatly appreciated.

nickschurch

unread,

Jul 20, 2016, 8:14:16 AM7/20/16

to d3-js

oops, the last var svg bit should have been removed - a previous effort...

Mike Bostock

unread,

Jul 20, 2016, 9:11:35 AM7/20/16

to d3-js

Here’s an example showing how to draw geographic lines (great arcs):

https://bl.ocks.org/mbostock/5928813

So, create a LineString (or MultiLineString) GeoJSON geometry, then pass it to d3.geo.path (or d3.geoPath in v4) to project it.

Mike

On Wed, Jul 20, 2016 at 8:14 AM nickschurch <nicks...@gmail.com> wrote:

oops, the last var svg bit should have been removed - a previous effort...

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward