App #8, Exhibitor Map

Click on a box to learn about that company

Today’s Finished Result

Screen Shot 2018-11-01 at 10.06.15 AM.png


objective: create a ‘map’ to showcases all of the exhibitors I met with at the Educause Conference.

  1. Refresh memory on SVG in CSS best practices

  2. Design map

  3. Paste svg code on web and work on any necessary edits

  4. Hover states + animations

  5. Design pop-up text

  6. Implement additional information on web

TO KEEP THINGS INTERESTING, I WILL NOT BE POSTING MY ENTIRE PROGRESS, - but I will need to test out how I can implement code into squarespace, which may be tricky, so I’ll keep all of the tests on this page.

click shapes to activate the svg tests

Ok, I refreshed my memory on animating and placing SVG shapes – I was also able to place all of the code into squarespace (using inline scripts and css, not the most organized but it works!) – now onto the map


I’m starting out with 3 boxes to make sure I have the rest under control – it’s working ok , need to figure out what those borders are behind the text. I figured out that I need to convert the text to outlines, because the text box is what is showing up in the background. MORE SHAPES :(

it's tiny.  
<p> WTVR, now on to the actual map.  I'll fix size l8r. </p>

Getting somewhere – here’s the initial map layout SCROLL OVER THE BOXES (ON COMPUTER ) TO SEE THEM GLOW :D

Click on a box to learn about that company

Finished result on the top of the blog for excitement purposes.

Until Tomorrow,

Gone Boardin'

Educause Conference