Mango HTML & Javascript Web Interface (6/24/2015)

Today I worked on creating the HTML and CSS for the actual campus map layout.

I started by pushing my gauge widgets to the footer of the page, so that I could reserve the body for the map.

My next step was to place the SVGs over the image.
I had the idea of putting both the image and the SVG inside a <div>, and using a shared coordinate system.
I tested this out by setting x="0" and y="0" inside my SVG, so that it would go to the local zero.

I then specified that the update <div> class would have its relative zero in the top left.

It worked, my SVG is in the top corner of the individual <div> element, and is tethered to it no matter the scale of the screen.

I then added this relative zero to my new map CSS class, along with the static size and location.
In order to layer them, I gave each element a static Z index, so that the SVGs would always be on top of the map.

I then pasted in my zero point to my HTML.

However, it created a zero point in the bottom middle of the map, despite the <div> element starting at the top left corner, as both the SVG and the IMG are contained inside it.

After hours of testing with the Z-Index, global and relative zero values, top, left, and bottom values, images inside SVGs, fractional referents, and CSS attributes, I finally found that for some reason I can only include the image after the SVGS.

I do not know why this changes anything, but now my SVG zero point matches my image zero point.

Nevertheless, I moved on to creating the SVG buildings that will be overlayed onto thew map.

I used the polygon shape, along with my browser's live editor to get the pixel coordinates from my established zero in order to draw my own buildings over the map.

Because these SVGs exist as HTML elements, I can assign an ID to them and interact with them through code, such as showing data when I hover over them.