D3js Map : GeometryCollection Vs FeaturesCollection

Question

I've been drawing maps for few weeks now but everytime i had that kind of geojson file (Featurecollection). Basicaly multiple arrays of coordinates for different neighborhoods of casablanca (in my example)

{"type": "FeatureCollection","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [{ "type": "Feature", "properties": { "name": "sid elkhader", "arrondissement": "Hay Hassani", "prefecture": "Hay Hassani", "Population": 18930, "area": 1616340.045 }, "geometry": { "type": "Polygon", "coordinates": [ [ [-7.686476562432639, 33.559325447129368], [-7.690429687499997, 33.557167523684669], [-7.690712466572602, 33.55630146957499], [-7.69193172454834, 33.557239049346535], [-7.6959228515625, 33.56135167528992], [-7.696309089660644, 33.561208630718284], [-7.696545124053955, 33.561494719624619], [-7.697145938873291, 33.561584122213503], [-7.698111534118651, 33.562549664276048], [-7.696180343627932, 33.56406947713436], [-7.698715871374095, 33.566658445267336], [-7.697645503668443, 33.567405785590324], [-7.697098054802192, 33.567712878788591], [-7.696259117371391, 33.568261506969215], [-7.696011511349325, 33.5683181977139], [-7.697387200000034, 33.570266599999982], [-7.696740007740531, 33.570256969950947], [-7.695561836061942, 33.570528261065235], [-7.694268410063101, 33.570921223641093], [-7.693596744041679, 33.571075056616195], [-7.692447518598163, 33.571143296338079], [-7.69142000156123, 33.571163408675481], [-7.690155388704593, 33.57138033300906], [-7.689247978305328, 33.571612665313971], [-7.688806874513382, 33.571727285593433], [-7.688311409275937, 33.571857958148009], [-7.687409400000027, 33.572054400000049], [-7.687391678068598, 33.572059961946792], [-7.684979438782096, 33.568718150423749], [-7.683219909667969, 33.565678661594823], [-7.683406457011668, 33.563482296958043], [-7.683829534164441, 33.562429900601146], [-7.686476562432639, 33.559325447129368] ] ] } }, { "type": "Feature", "properties": { "name": "nassim", "arrondissement": "Hay Hassani", "prefecture": "Hay Hassani", "Population": 18898, "area": 4776317.152 }, "geometry": { "type": "Polygon", "coordinates": [ [ [-7.665259712372787, 33.530737914470194], [-7.663579428308825, 33.5378162517151], [-7.660416146883682, 33.53687582432655], [-7.653830735645996, 33.533727400613216], [-7.653876700000025, 33.5326443], [-7.65348, 33.531745500000149], [-7.653190299999866, 33.529947799999803], [-7.652943599999785, 33.528677899999671], [-7.653615699999913, 33.526604099999851], [-7.653936200000107, 33.525365200000174], [-7.654509399999957, 33.5241387], [-7.655106500000205, 33.522667000000347], [-7.656280299999967, 33.520306199999879], [-7.656956199999512, 33.519349099999339], [-7.658114900000093, 33.517926900000134], [-7.658983900000114, 33.516343700000149], [-7.659490200000375, 33.515535600000646], [-7.6601104, 33.5145457], [-7.660947299999948, 33.513347099999926], [-7.662599500000061, 33.511602700000104], [-7.664262500000047, 33.510654500000086], [-7.666333199999984, 33.509563099999966], [-7.668178499999983, 33.50827], [-7.668900600000119, 33.507543800000242], [-7.669823299999847, 33.506934599999816], [-7.670733100000266, 33.507059900000414], [-7.673713600000018, 33.50863970000001], [-7.676073900000079, 33.509053], [-7.68223779133892, 33.508502572767156], [-7.684989189541704, 33.508844023847608], [-7.683734893798827, 33.512559745083195], [-7.675151824951172, 33.519357925734134], [-7.674551010131836, 33.520717497758142], [-7.671031951904296, 33.524796085610056], [-7.668800354003906, 33.526441777122507], [-7.668285369873048, 33.528516734826688], [-7.665259712372787, 33.530737914470194] ] ] } } ....

Now, since i'm exporting geojson files from openstreemap http://polygons.openstreetmap.fr/index.py i'm having that type of geojson (GeometryCollection) for a specific town (no neighborhoods, only the form of a town)

{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","coordinates":[[[[-5.9429266,35.745548300000003],[-5.9379208,35.743288800000002],[-5.9327023,35.7417388],[-5.9272307,35.741231999999997],[-5.9202848,35.741909499999998],[-5.9166306,35.746408000000002],[-5.9156028,35.7496942],[-5.9046272,35.760035999999999],[-5.9001726,35.762371000000002],[-5.8900896,35.7656931],[-5.8790518,35.756111199999999],[-5.8770798,35.7525902],[-5.8737711,35.745343900000002],[-5.872858,35.742017500000003],[-5.8727035,35.741004699999998],[-5.8699858,35.732553199999998],[-5.869492,35.731017299999998],[-5.8673423,35.728874099999999],[-5.8638447,35.7260068],[-5.8619479,35.7246934],[-5.8556436,35.720934100000001],[-5.8510603,35.719324399999998],[-5.8464426,35.716996799999997],[-5.8434943,35.714585599999999],[-5.8387091,35.711292700000001] ....

Here are my questions :

When i try to draw the map with the Geometrycollection geojson type, i'm having a huge square with a blank point, is it because i'm only having 1 single array of coordinates and not multiple like the 1st example ???
How can i structure a new geojson file to use the coordinates of the Geomtrycollection into a FeatureCollection (since it works only with that type) ???

I've been searching a lot Tip 1 and here Tip 2 and here Tip 3 but i couldn't find my answer

Thank y'all for your help

could you please share the code which actually draws the maps? — elias
@Elias, here's the Plunker link : plnkr.co/edit/MbhmpGmi4nP7o3xR1Cxg?p=info 2 json files (Marrakech with original FeatureCollection and Test with FeatureCollection that i created based on the GeometryCollection type i had from Openstreetmap. Thx — MFAMOROCCO

torresomar torresomar · Accepted Answer · 2017-02-23T17:22:49

I couldn't manage to render the Test.json file, so I used mapshaper in order to transform it to a GeoJSON that we could actually read. Then use the new perks in d3 for geo data fitSize is amazing and takes care of all the centering and measuring of your GeoJSON.

 #Test.json transformed
 {
     "type":"FeatureCollection",
     "features":[
     {
         "type":"Feature",
         "properties":{

         },
         "geometry":{
             "type":"Polygon",
             "coordinates":[

Your logic is fine :) just using the new d3 methods.

  d3.json(fichier, function(json) {
    var projection = d3.geoMercator().fitSize([w, h], json);
    var path = d3.geoPath().projection(projection);
    svg.selectAll('path')
      .data(json.features)
      .enter()
      .append('path')
      .attr('d', path)
      .style("fill", "red")
      .style("stroke-width", "1")
      .style("stroke", "black")
      .on("mouseover", function(d) {
        //console.log(d);
      });
  });

Here is an updated plnkr http://plnkr.co/edit/MHsC4J2xFC0nrHXSZQGQ?p=preview

D3js Map : GeometryCollection Vs FeaturesCollection

1 Answers