CODEWITHSUNDEEP
htmlsvgmapsmouseovershapes
Luke Madhanga
Luke Madhanga

Reputation: 7457

HTML5 Complex Shapes with Mouseovers

Does anyone know how Google created the Map data in Youtube's analytics section?

The mouseovers are in the right place, ie, when your mouse leaves the US into Canada, Canada is the object in focus. My knowledge of HTML tells me that browsers only recognise square shapes, and if you want to make a shape that's remotely complex, you have to code a lot.

e.g., the left slant in the home icon doesn't pick up mouse events p.walkleftstudios.com/am2.1 Done using HTML5 canvas, and a bit of trigonometry.

e.g., in this example, I've completely left that out (canvas was too annoying to work with) p.walkleftstudios.com/am2.2

I've seen an SVG tag in the code, this is probably where the magic happens

Upvotes: 0

Views: 260

Answers (2)

Gjokica Zafirovski
Gjokica Zafirovski

Reputation: 11

Most Google products use GViz for data visualization. If you want to draw map charts based on data input, there is API for it.

https://developers.google.com/chart/interactive/docs/reference

GViz output is in SVG or VML for the older IE browsers, so your charts will work everywhere - old, new, desktop and mobile browsers.

Upvotes: 1

user625860
user625860

Reputation:

I believe what you are looking for are image maps.

Upvotes: 0

Related Questions