0

I am trying to map a cities roads using .shp files and D3. The projection is buggy, and I've exhausted my Google abilities.

  • The .shp files are from Mapzen (mapzen.com) and they use EPSG:4326 as their projection type.
  • I'm not baking data until I can map, and ogr2ogr defaults to the 4326 projection.
  • The directory where the .shp file is in has all of the associsated files needed (.prj, etc).

The directory where the .shp file is in has all of the associated files needed (.prj, etc).

ogr2ogr \
    -f GeoJSON \
    roads.json \
    mapzen_file.shp
topojson \
    -o map.json \
    roads.json

MY PROBLEM: When I map in d3, 'blobs' appear in my projection. See a screenshot here.

I initially thought it was my projection, but it looks similar in mercator/albers. By styling I can turn the black fill off, but I can't set a stroke width to see outlines (comes up white, only highlighting lets me zoom to it).

But, I used the same map.json file in Mapshaper to make sure it wasn't my .json file, and it looks to project just fine. See Mapshaper screenshot. I can also use the .shp & geojson files in QGIS without a problem.

Because I didn't use any projection settings in the conversion, my code includes the projection functions. I also used a redraw function so I could easily find the scale/translate. My code is as follows:

var width = 960,
    height = 600,
    defScale = 1000,
    defTranslate = [0, 0];

var projection = d3.geo.mercator()
var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    console.log("redraw scale",d3.event.scale * defScale);

    projection.scale(d3.event.scale * defScale);
    var xTranslate = d3.event.translate[0] + defTranslate[0],
        yTranslate = d3.event.translate[1] + defTranslate[1];

    console.log("redraw x: ", xTranslate);
    console.log("redraw y: ", yTranslate);

    projection.translate([xTranslate, yTranslate]);
    svg.selectAll("path")
        .attr("d", path);
}

d3.json("map.json", function(mapData) {
    svg.append("path")
        .datum(topojson.feature(mapData, mapData.objects.roads))
        .attr("class", "roads")
        .attr("d", path);
});

I know that's a mouthful, but I'm trying to provide as much information as possible. Any ideas?

Caleb Kleveter
  • 11,170
  • 8
  • 62
  • 92
Ryan Larson
  • 1

2 Answers2

0

I think what you're seeing is the filling of the paths. Can you try adding the following style sheet:

.roads { 
  fill: none;
  stroke: rgba(100, 100, 150, 0.5);
  stroke-width: 1px;
}
SiggyF
  • 22,088
  • 8
  • 43
  • 57
0

Found out it was my css styling, the projection works fine.

Changing the stroke color and setting fill: none; seemed to do the trick.

Ryan Larson
  • 1