Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am trying to overlay dots of arbitrary sets of longitude-latitude coordinates on top of a United States map.

So far I have found the D3 cartography example, but when I try to place dots on X,Y pixel coordinates they appear way off the canvas. I did find workshot lecture notes which include coordinate systems in d3, but I'm still unsure of how get lat/long coords to show up on the map.

This is what I have so far (pretty much only a map of the USA)

Advice on how to make this work would be greatly appreciated!

share|improve this question
    
d3 is svg correct? –  Mapperz Oct 2 '12 at 17:49
    
Yes, d3 is svg. –  Jay Taylor Oct 3 '12 at 0:56
1  
A good example of rendering svg to map is here - github.com/kartograph/kartograph.py/wiki/… using Path and Measures –  Mapperz Oct 3 '12 at 13:34
    
Thanks, I'll check it out. –  Jay Taylor Oct 3 '12 at 18:05
add comment

1 Answer 1

You need to have a projection() function to project the lat and long of your points onto the map. By default, a d3 geo path uses the albersUsa projection, so you could declare it explicitly:

var projection = d3.geo.albersUsa();

You'll see this done in examples that don't use AlbersUsa, and by defining the projection you can modify it. Having it defined makes it available as a function. This way you could place your points as svg circles:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

That should drop a circle on the rough vicinity of New York. You could then bind data that had the "lat" and "long" as attributes, in which case it would look like this:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

The projection function takes [long,lat] array and returns a [x,y] array, which fits fine into transform,translate() syntax, or you could split the array for x and y values.

The example below places polys, lines and points, and takes the points from a csv and projects them onto a map, but notice that it transforms the g element and appends an a circle onto that element (you might also want a label or other aspects to a site, all of which would be appended to that projected g element):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.