4

How do I create a building/school Map which I can zoom and get context information for each classroom using D3.

I have read examples of how to create Zoomable Geo Maps http://bl.ocks.org/mbostock/2206590 , but in the code, it uses the TopoJSON (or GeoJSON) format of the US states.

How do I get the GeoJSON file for a school building?

Thanks, Raj.

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
Rajesh Jain
  • 1,159
  • 3
  • 19
  • 37
  • 1
    Seems like GeoJSON would be massive overkill for a single building. Assuming it's a single floor, why not just use plain old SVG? Floor plans are (for the most part) just rectangles, after all. Surely your building isn't large enough to worry about map projections. – Stephen Thomas Mar 22 '15 at 22:37
  • 1
    GeoJSON files are usually built from shapefiles, right? I doubt you'd have a shapefile of a single building - also agree with @Stephen, it'd be overkill. Also, your question is still very top-level - SO isn't normally used to crowdsource the sketching out of an entire project. Try out some code first, and then come back when you get stuck. – goblin-esque Mar 23 '15 at 06:58
  • 1
    Possiblely a duplicate of [this](http://stackoverflow.com/questions/22111036/venue-indoor-map-using-d3-js-and-geojson) question. I agree that GeoJSON may be overkill, but there would be a nice workflow from a CAD package to QGIS to create the GeoJSON which definitely does have some advantages if you've got a complex floor plan. – user1614080 Mar 23 '15 at 20:03
  • 1
    Thank you for the comments. I am going to start with SVG and maybe GeoJSON. I agree this is more top level -- I will get my hands dirty and then come back. – Rajesh Jain Mar 23 '15 at 20:45
  • There are online geojson editors, such [geojson.io](http://geojson.io). You can find your building, map it, add properties such rooms name, then export the geojson. – Hugolpz Mar 26 '15 at 09:52

1 Answers1

3

Hard core geojson

There are online geojson editors, such geojson.io. You can find your building, map it, add properties such rooms name, then save it as geojson or as topojson file.

enter image description here

Note that geojson.io doesn't allow an infinite zoom, so your drawing may be quite approximative.

In your D3js code, you will have to autofocus on your json data (shape). A convenient working example is explain in the 2nd half of this answer, the D3js call and Focus sections.

Witty SVG

Designing your building as an SVG / XML file using Inkscape or some other vector editor would be a bit longer to do, but will end up into better end results. You then use d3.xml(http://yourwebsite.org/file.xml, function(data){ ... }). I have, unfortunately, too few expertise in this direction, but it's the way I would go for if quality is requested at that level.

Community
  • 1
  • 1
Hugolpz
  • 17,296
  • 26
  • 100
  • 187