Wilson Mar bio photo

Wilson Mar


Calendar YouTube Github


Includes make me happy

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean


States of the Union

Major cities are listed in the index on the right.

Clickable US map (Click on Oregon or Washington state):

USA states

WA = Washington

OR = Oregon

I was not able to get them working by doing an include:

{% include us_states_museums.html %}


If you know me, I’ve got a bunch of complicated diagrams with lots of boxes and lines.

So I’ve been creating animations in PowerPoint, then recording explanations in videos that reveal each box and line.

That diagram on my website I would craft coordinates around each clickable area (image maps in HTML and now in CSS).

Jekyll supports collections

Making clickable maps

Several websites help in the tedious work of defining clickable areas:

  • https://makeaclickablemap.com

  • https://www.image-maps.com

Some examples make use of jQuery:

  • http://winstonwolf.pl is beautiful maps of European countries as well as the US.

  • http://www.outsharked.com/imagemapster/ jQuery

Blogs about this topic:

  • http://www.cssplay.co.uk/articles/imagemap/

Sites that have nice maps


<iframe src="https://www.makeaclickablemap.com/map.php?dd079c4716f558afc7fca114027f699f7c2c005f" frameborder="0" scrolling="no" height="720" width="960"></iframe>

SVG if you have it

Scaled Vector Graphics stay sharp on all sizes.

  • http://freehtml5maps.com uses raphael javascript library to render the map in SVG or VML.

  • http://codecanyon.net/item/interactive-usa-map-html5/4527698 asks $13 for its SVG scalable/responsive USA map.

<svg version="1.1" id="Layer_1" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; x="0px" y="0px" width="1343.791px" height="932.583px" viewBox="0 0 1343.791 932.583" enable-background="new 0 0 1343.791 932.583" xml:space="preserve"> <g id="Panama"> <path fill="#FDF9D1" stroke="#918E8F" d="..."/> </g> </svg> 
  • http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

  • http://code.google.com/p/svg2imap/

More on front-end styling

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau