Well, I have no idea what I was doing half of the time, but I have a working prototype of an interactive map. Now, a map where you see all the areas and planets wasn’t the end goal for this project, but it does serve as a good base to build upon.

I did end up using the blog post from Adam Filkor (an interactive map using KineticJS) for most of the work, duplicating sections to make new layers, and adding in the code from my JSFiddle as well as using my Google-foo to find a way of putting my JSON files into it.

I referred to AgaveStorm a lot as it documents all of the KineticJS features that are no longer listed on the original website (the project is no longer updated).

Once I had all the planets listed, the areas marked and labelled (and the labels on different levels so as to not affect the planets), I added a key and a help section that pop-up when clicked (so as not to be intrusive) using some code from INTERNETKULTUR. I then finished the whole thing off with a bit of CSS styling to make the title and information look a little nicer.

I still need to go through and tidy all of the code up. The duplicated sections of Adam Filkor’s code can probably be simplified, and I need to remove all the parts I commented out because I wasn’t using them.

I also need to actually explain how the code works on a blog entry at some point. That’s going to be a lot of work because I have no idea how the code works – just that it does 😀

As a side note I’m going to keep this prototype under the 40kmap directory, and start working on the project proper in another directory. This way I always have a backup to go to, and my prototype can be used to help find your way around the 40K galaxy.

screenshot of an interactive map set in the warhammer 40,000 universe
Preview of version 1 of an interactive map