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

Today I worked on the mechanics behind displaying relevant data on the map.

Now that I could display custom markers on my map using SVGs, I needed to make them intreactable.

I started by creating a simple test SVG woth a red fill.

I then incorporated onmouseover and onmouseout events to change the fill color of the SVG.

The result is that the SVG turns blue when I hover my mouse on top of it.

I then decided to apply this to my custom polygon.

In stead of using SVG functions, I decided to call my own custom Javascript functions when I mouseover the SVG element.
From the Javascript, I then change the style.fill value, resulting in the same output.

Also, because mousing over calls my own custom Javascript functions, I can put any Javascript code I want inside it.
For example, I can instantiate popup alerts:

I can also instantiate text:

However, I wanted something more elegant.

I needed to be able to create a "popup" window that does not take control away from the page, and goes away on hover, now by manual exiting it.
I also needed to center this window on the SVG, not the View <div>.
So, I spent some time researching CSS and Javascript solutions to creating "description boxes", but I could not find a way to create a new relative zero inside the SVG, and have the <div> follow that, as <div>s align to a direction, not a pixel.
I will look into this further.