3

Yesterday I asked what would be the best method of creating an overlay in a web map that would allow for some interactivity.

Create interactive map with no server

Thanks to a variety of people who recommended I go down the D3 and Topojson route.

The example that looks like the perfect solution is http://bl.ocks.org/mbertrand/5218300

So I created a topojson from an ESRI Shapefile using the following command

topojson --id-property full_name -o southeast.json southeast.shp

I have since tried every possible permutation and example to try and get the topojson loaded and I have hit a brick wall. I just do not understand what I am doing wrong.

I have used the following examples

http://www.schneidy.com/Tutorials/MapsTutorial.html https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object Conversion from Shapefile to TopoJSON format results in incorrect map when rendered using d3js http://milkator.wordpress.com/2013/02/25/making-a-map-of-germany-with-topojson/

and Mike's original example

http://bost.ocks.org/mike/map/

Maybe it is because i am not using EPSG:4326, but this example says that you do not have to use a projection

http://bl.ocks.org/mbostock/5557726

The data can be found here - https://www.dropbox.com/s/dfxxi4xwrsdfa8t/southeast.json

And this is my code

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 500,
    height = 500;

//null projection as my ESPG is not supported
var path = d3.geo.path()
    .projection(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect").attr('width', width).attr('height', height)
    .style('stroke', 'black').style('fill', 'none');

//d3.json("southeast.json", function(error, south) {
  //console.log(south);
//});

d3.json("southeast.json", function(error, uk) {
  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.southeast))
      .attr("d", d3.geo.path().projection(null));
});

I first tested with sending the data to the console and that worked fine and told me that the object is "southeast".

If I try this I get an n is not defined error in Firebug.

I then tried

// d3.json("southeast.json", function(error, south) {
//   svg.append("path")
//       .datum(topojson.feature(south, south.objects.southeast))
//       .attr("d", d3.geo.path().projection(null))
//       .style("fill", "red")
//       .style("stroke-width", "1")
//       .style("stroke", "black");
// });

Which seems to work as there are no Firebug errors, but no data is visible

Then I tried

// d3.json("southeast.json", function(error, uk) {
//   svg.selectAll(".southeast")
//       .data(topojson.feature(uk, uk.objects.southeast).features)
//     .enter().append("path")
//       .attr("d", path)
// });

And the same thing happens

With no errors I am struggling to understand what I have done wrong

If I could just make this example work in EPSG:27700 with my topojson it would be amazing http://bl.ocks.org/mbertrand/5218300

Thanks

EDIT

One of the other answers was to use a simply getJSON function and add the data as geojson in OpenLayers. I have just tested it using the same topojson:

$.getJSON('southeast.json', function (data) {
            fusiegem = topojson.feature(data, data.objects.southeast);
            var geojson_format = new OpenLayers.Format.GeoJSON();
            var vector_layer = new OpenLayers.Layer.Vector();
            osMap.addLayer(vector_layer);
            vector_layer.addFeatures(geojson_format.read(fusiegem));
        });

And that successfully loaded, so it seems there is nothing wrong with my topojson file, it is the D3 bit that does not seem to work correctly

1

If I understand correctly (the file is not available anymore so I could not check), the problem is related to the projection.

In the http://bl.ocks.org/mbostock/5557726 example, a null projection can be used because the topojson file is already in screen coordinates thanks to the options: --width 960 --height 800 during the topjson file generation. In your case, since you didn't specify those options, you will likely need to define a projection (d3.geo.albers for example).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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