1

I am trying to display the map of london using the code

 <script type="text/javascript">
    var w = 1400;
    var h = 700;
    var svg = d3.select("div#container").append("svg").attr("preserveAspectRatio", "xMinYMin meet").style("background-color","#c9e8fd")
    .attr("viewBox", "0 0 " + w + " " + h)
    .classed("svg-content", true);
    var projection = d3.geoMercator().translate([w/2, h/2]).scale(2200).center([0,40]);
    var path = d3.geoPath().projection(projection);


var london = d3.json("london.geojson");

Promise.all([london]).then(function(values){    
 // draw map
    svg.selectAll("path")
        .data(values[0].features)
        .enter()
        .append("path")
        .attr("class","borough")
        .attr("d", path)
  });

this part of my my json file

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    {
      "type": "Feature",
      "id": 0,
      "properties": {
        "id": 1,
        "name": "Kingston upon Thames",
        "code": "E09000021",
        "area_hectares": 3726.117,
        "inner_statistical": 0
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [-0.330679062942453, 51.3290110106029],
              [-0.330594448736231, 51.3290880398783],
              [-0.330506117851447, 51.3291488295065],

This goes on for multiple parts of london.

However when i run this it does not display anything or give out any errors. Can anyone see what i have done wrong here or am i missing aything?

MMM
  • 77
  • 3
  • 2
    Have you tried centering the map more on London, you have a centering of [0,40], which should be in Spain. What do you see if you try `[-0.33,51.32]`? – Andrew Reid Apr 01 '20 at 03:57
  • Thank you very much been trying for ages to figure it out. Do you want to make ur comment on a answer so i can confirm it as the correct one? @AndrewReid – MMM Apr 02 '20 at 15:25
  • I've answered quite a few of these, I'll give you the chance to fill one in first. I'll note that a good trouble shooting technique is to use a world geojson to see if you're looking where you think you are (zooming out if need be to see features). I'll also point at this [answer](https://stackoverflow.com/a/40940028/7106086) which allows automatic scaling and translation to show features (v4+). – Andrew Reid Apr 03 '20 at 03:25

0 Answers0