2

all.

I'm working on a project that involves overlaying a map of the state of Kansas (that includes county borders, and some other geographic details) on top of a static, equirectangular base map that I've designed in Adobe Illustrator.

I'm having no problems generating the equirectangular projection. But when it comes to sizing the projection so that it fits exactly on top of the static base map, I can't seem to figure it out.

I'm guessing the secret lies within these functions. 

var projection = d3.geo.equirectangular()
    .scale(1)
    .translate([0, 0]);

If the total size of my static base map image is, say, 1000px by 300px, and the outline of Kentucky in which the projection must fit is 530px by 230px, how can I tweak the scale/transform and other functions to resize the projection?

Here is a link to a proof-of-concept illustrating what I'm trying to accomplish.

https://i.stack.imgur.com/qEtR1.png

The background image is obviously fixed in width/height. The transparent outline of Kansas that's overlaid would be generated by D3, but would have to be tweaked to fit the map.

Any help would be appreciated!

Matt Rothenberg
  • 86
  • 1
  • 6
  • [This question](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) tells you how to translate/scale a map to fit a particular feature. You would have to do the same for Kansas, maybe tweaking a little bit to get it exactly right. – Lars Kotthoff Dec 13 '13 at 09:31

0 Answers0