I have a geocoded raster image that I want to use as the background to a vector map with D3.js. The screenshot shows the layers in QGIS (grey is raster). Here's the markup for the map:
Also, see this map from the New York Times for an example of what I'm aiming for. My question is: How do I make the vector layers and the background image align in the browser?
I think this is the relevant code sections from the NYT, but I'm not sure how to apply it to my own project:
var background = $('.the-background');var basemapAspectRatio = 0.6244;var mapCenter = [42.45,32.42];var mapScale = 2.288;var mapRatio = 7000 / 4371;var mapHeight = background.height();var trueWidth = mapHeight * mapRatio;var mapWidth = background.width();projection = d3.geo.mercator() .center(mapCenter) .scale(trueWidth * mapScale) .translate([mapWidth / 2, mapHeight / 2]);
أكثر...
I think this is the relevant code sections from the NYT, but I'm not sure how to apply it to my own project:
var background = $('.the-background');var basemapAspectRatio = 0.6244;var mapCenter = [42.45,32.42];var mapScale = 2.288;var mapRatio = 7000 / 4371;var mapHeight = background.height();var trueWidth = mapHeight * mapRatio;var mapWidth = background.width();projection = d3.geo.mercator() .center(mapCenter) .scale(trueWidth * mapScale) .translate([mapWidth / 2, mapHeight / 2]);
أكثر...