HTML image map for 2R ecosystem map

[rufuspollock]

Acceptance

• Clickable HTML image map of 2R ecosystem (clicking on organisations' and people's names goes to a relevant link)
• Clickable HTML image map replaces the non-interactive version on the site?
• Blog post to share this new version?

Tasks

• Ask for help in Discord server 2024-06-05 rufus asked for help with creating HTML image map in Discord server and aashay volunteered 🙏
• Get coordinates for points on map Spreadsheet of names, coordinates, and links here: https://docs.google.com/spreadsheets/d/1UCNiz4PITIUw3jI-nqAHlOJF7VEHitB36NSE9o0PhCM/edit?gid=0#gid=0
  • Test run aashay found this tool to generate map coordinates: https://www.image-map.net/ and did a small set of points. catherine double checked by running code through HTML compiler https://onecompiler.com/html/42fzbxzwp 👍
  • Make any adjustments Use target="_blank" instead of target="_self" so that the links open up in a new tab. aashay decided to get rid of titles as kind of repetitive and unnecessary
  • Do the rest aashay's finished spreadsheet. Made a copy and saved in GDrive here: https://docs.google.com/spreadsheets/d/1UCNiz4PITIUw3jI-nqAHlOJF7VEHitB36NSE9o0PhCM/edit?gid=0#gid=0
• Check coordinates 2024-07-02 CT ran code through HTML compiler and scanned map to check correct areas are clickable and scanned spreadsheet to check links -- looks good 👍
• Create clickable map
• Publish
  • Replace non-clickable version at https://secondrenaissance.net/map ?

Context

We want to make the current map clickable by turning it into an html "image map".

This involves creating a list of the places on the map and the coordinates for a box on the map.

See for example view-source:https://slatestarcodex.com/blog_images/ramap.html

So for each thing we want to link we need coords box (probably list this in a sheet and then we can auto generate html)

<img id="Map of the Rationalist Community" src="http://slatestarcodex.com/blog_images/ramap.jpg" border="0" width="3292" height="1800" orgWidth="3292" orgHeight="1800" usemap="#ramap" alt="" />

<map name="ramap" id="Map Of The Rationalist Community">
<area  alt="" title="" href="https://groups.google.com/forum/#!forum/vancouver-rationalists" shape="rect" coords="139,559,222,578" style="outline:none;" target="_self"     />
<area  alt="" title="" href="https://groups.google.com/forum/#!forum/lw-seattle" shape="rect" coords="170,627,231,652" style="outline:none;" target="_self"     />
<area  alt="" title="" href="https://groups.google.com/forum/#!forum/lesswrongwaterloo" shape="rect" coords="512,746,589,778" style="outline:none;" target="_self"     />
<area  alt="" title="" href="https://groups.google.com/forum/#!forum/less-wrong-ottawa" shape="rect" coords="602,671,678,692" style="outline:none;" target="_self"     />
<area  alt="" title="" href="https://www.facebook.com/groups/380103898766356/" shape="rect" coords="743,648,810,667" style="outline:none;" target="_self"     />
<area  alt="" title="" href="http://www.meetup.com/Cambridge-Less-Wrong-Meetup/" shape="rect" coords="683,747,756,779" style="outline:none;" target="_self"     />
<area  alt="" title="" href="http://wiki.lesswrong.com/wiki/NYC_meetup_group" shape="rect" coords="571,830,644,875" style="outline:none;" target="_self"     />

[catherinet1]

See Discord thread for conversation with aashay who volunteered to help generate the coordinates and HTML code for the map: https://discord.com/channels/1230798369337643030/1247867862769602580

[catherinet1]

2024-07-02 update: we now have the coordinates and HTML code for all organisation and people points on the map in this spreadsheet: https://docs.google.com/spreadsheets/d/1UCNiz4PITIUw3jI-nqAHlOJF7VEHitB36NSE9o0PhCM/edit?gid=0#gid=0.

I made a copy of aashay's (volunteer from Discord) spreadsheet so that we have our own editable copy in our GDrive.

Next is to generate the code to create the HTML map and publish on 2R site.

[aashay]

Wrong person 🙂