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 :
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
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