4

I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.

I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.

Desired Features:

  • map on the left
  • details pane on the right
  • timeline slider/filter at bottom
  • Territories
    • color for political affiliation
    • displays details in details pane
    • labels
  • labels for cities

Hurdles:

  1. Get a clean map image to work with
  2. Map image into intermediate format (svg, geojson, topojson?)
  3. Display map on webpage, style map, add animations, etc

Technologies

  • SVG
    • I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
    • The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
  • Kartograph
    • La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
    • The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
    • My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
  • D3.js
    • The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.

So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.

Thoughts?

Scotty Viscocity
  • 41
  • 2
  • 1
    It seems to me that any answer would be based on opinions. You could almost certainly do all of what you want with any of the technologies you've outlined. – Lars Kotthoff Feb 12 '15 at 22:38
  • I think you just have to design your middle earth by hand in a .shp software such QGIS. Then use `topojson` command line to convert from shp to topojson file. Then, you could grab some existing autofocusing D3js code and hack it a bit to make it works. – Hugolpz Feb 12 '15 at 22:40
  • http://gis.stackexchange.com/q/14309/19460 – Hugolpz Feb 12 '15 at 22:43
  • Note: d3 and topojson usually go with vector gis files, rarely with bitmap gis images. – Hugolpz Feb 12 '15 at 22:45

1 Answers1

1

I'm currently writing my master thesis and I have the same topic like you had these days. I called my project Arda Maps. Feel free to ask me anything if have techonology questions.

I'm using the following frameworks/tools in my project:

  • QGIS
  • JQuery
  • D3.js
  • GeoJSON/TopoJSON
  • TimeGlider
kwoxer
  • 3,734
  • 4
  • 40
  • 70