Predator44 Predator44 - 3 months ago 12
Javascript Question

Why can't I see the map in my browser after parsing the geojson file?

I have the huge geojson showing all the districts of Dubai. Here is a sample:

{
"type":"FeatureCollection",
"totalFeatures":224,
"features":[
{
"type":"Feature",
"id":"Community.1",
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[

[
55.16945847438926,
25.03005371689898
],
[
55.168575711653915,
25.03074785219016
],
[
55.169258376227525,
25.03150691074316
],
[
55.169931129543535,
25.032274981961805
],

]
]
]
},
"geometry_name":"the_geom",
"properties":{
"COMM_CODE":684,
"NAME_AR":"البرشاء الجنوب الخامسة",
"NAME_EN":"AL BARSHA SOUTH FIFTH",
"AREA_ID":442,
"SHAPE_AREA":2951425.95614,
"SHAPE_LEN":10871.405155
}
},
{
"type":"Feature",
"id":"Community.2",
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
55.34592943407097,
25.16925511754935
],

[
55.34604885385063,
25.17297434345408
],
[
55.34600905862783,
25.171854965446766
],
[
55.345979182892805,
25.170726559094064
],
[
55.34592943407097,
25.16925511754935
]
]
]
]
}


I have a very simple code in d3, that parses the geojson and displays it in the browser. However I cannot see the results.

Here is my code:

d3.json("dld.json", createMap);

function createMap(countries) {
var aProjection = d3.geo.mercator();
var geoPath = d3.geo.path().projection(aProjection);
d3.select("svg").selectAll("path").data(countries.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
}


There is no error displayed in the console.
If someone could please point to me where I've mistaken, I would be the most thankful :)

Answer

The issue is, that you haven't yet set your bounding box you want to view in the map. For this you can extend your projection like this:

var aProjection = d3.geo.mercator().scale(1000).translate([-1000, 1000]);

The entered values are just an example. Unfortunately setting this up can be quite tedious. For more information about how to find the correct values you can look here:

d3js scale, transform and translate

Comments