Sunday, January 13, 2019

Interactive Venue Map for CodeMash

I was frustrated with not having a searchable venue map for the CodeMash conference, so I decided to create one myself.  Initially, I was going to build it from scratch while learning some cool new JavaScript framework, but upon googling the problem I came to realize that there are various tools out there that make creating such a map fairly easy.  The software that best fit my needs was MapWize.  I ended up creating the following map, which can be accessed via codemash.sjonsson.com or by clicking on the image below.
The map allows you to search for a room by name and to get directions between two rooms, in addition to supporting pinch-zoom and general website responsiveness.

Here are the high-level steps that went into creating the map:
  • I emailed the CodeMash team and got a reasonably high res PDF of last year's conference map.  
  • I cropped the image and removed much of the background.
  • I imported the image into MapWize Studio and overlayed it onto their street map, which already had the exterior of the Kalahari Convention Center.
  • I then added a new place on the map for each conference room and drew the boundaries of each room.  I gave the room a name and configured a few properties, such as room type and marked it as searchable and clickable.  This was the most tedious part of the process as it took some time to draw each room onto the map.
  • Next, I drew direction lines along all the hallways and marked the exits/entrances of the building.  This is what the software uses when calculating directions between two places on the map.
  • And that is pretty much it.  I then published the map and generated a MapWize URL for it.  To make it a bit easier to share and to remember, I created the alias codemash.sjonsson.com
One feature I didn't take advantage of was indoor navigation based on beacons or location of Wifi routers.  If those are enabled, the software can show your indoor location on the map.  That way you only have to type in the destination when getting directions to your next session and you'll see yourself on the map as you are walking.  Pretty much how you'd expect outdoor navigation to work.  You can achieve the same by giving the map permission to see your GPS location, but GPS reception is spotty when indoors.

Anyways, I used the map heavily during CodeMash and shared it with other conference guests. Feel free to use it and further share with others.  If you found it helpful I'd love to hear from you :)