HTML MAP tag, lessons learned

This year the Friends of Silverbrook Cemetery is hosting a virtual tour instead of the regular annual walking around tour for the cemetery.  The tour guide is Mollie Watson from the Niles History Center.  I recreated what Mollie did in Google Slides on the website.  This included copying images, cutting and pasting text, while trying to keep the flow of the presentation.

One slide that I found challenging was the hyperlinked map.  When you click on a star marker, you go to a page related to that part of the cemetery.  Here is the JPG file from the Virtual Tour Map page.


The most important step I found was to size your image properly. The original image was 1112x906 pixels.  I uploaded the image into a Joomla media folder and used the JCE editor to resize the file until it looked good. The new size of the image was 653x529, which is about half.

I opened the image in Paint.  I clicked the Resize option under Home->Image.  I selected pixels and typed in 653 and 529.  Then I saved it to a new file and uploaded the new image in Joomla.

In the code view of the article, I have the following tag for image:

<img src="/site4/images/VirtualTour/MapWithStars5.jpg" alt="" usemap="#mapwithstars" width="653" height="529" style="width: 653px;">

The usemap option is the magic that makes this work.

Within the article (still in code mode) I create a MAP block in HTML with the name and ID "mapwithstars".

<map name="mapwithstars" id="mapwithstars"> 

Then I capture each star point on the map.  This is the line for point 6, the Chime Tower.

<area alt="Chime Tower" coords="376,417,434,464" shape="rect" href="/site4/chime-tower" target="_self" title="Chime Tower">

I chose rectangles for each shape.  The coords are in the format x1,y1,x2,y2 for a rectangle.  I found that the differences between x1 and x2 or y1 and y2 should be at least 40 pixels.  

Here I'm hovering above left of the Chime Tower.


I finished the page with some more text and hyperlinks.

One pitfall working with a large image is that the MAP tag is not very useful for mobile.  Any image that's over 400 pixels will get distorted on a cell phone screen.  Rather than doing something clever with events, I just put a table of contents below the image which can be clicked easily.

Here are some links that were useful for my education:

Bob's Tech Corner

"HTML MAP tag, lessons learned"

https://bobstech.rvnllc.com

Bob Nightingale, info@rvnllc.com

Created 30-OCT-2020

Comments

Post a Comment

Popular posts from this blog

MyMaps to Spreadsheet, KML to CSV and back

Image
I'm sharing a couple Python scripts that I used to update my Google MyMaps map for a website that I manage. Know your data On the  website I manage for the Friends of Silverbrook Cemetery, I created a Map of Sections page with an iframe of a Google MyMaps page. Each of these colored sections is a map layer of polygons. The major sections are Old Grounds, City Addition, Bond Addition, New Addition, Garden of Memory and Garden of Eternal Peace.   Each of those polygons was hand drawn in MyMaps. In addition to the polygon, I have pins in a separate layer called "Points of Interest".   Those pins have a slightly different data structure than the polygons.   For now I'm just going to focus on the polygons. As an example, I'm going to take that large yellow triangle in section New-63 and distort it.   First, I need to export the New layer of the map to a KML file.   I select "Export to KML/KMZ". I just need the KML file.  A KMZ is a zip archive o
Read more

GPS Test KML to CSV

Image
As part of surveying my local cemetery, I am using an Android app called GPS Test by Chartcross. I start with list a list of graves in my cemetery I need to get GPS coordinates for. I then gather those by taking samples with the app and changing the names of the points to the GraveID from my report. I export the KML file from the app and transfer it to my PC.  (I used Google Drive as my go-between, but any method will do, such as Bluetooth transfer.) I modified the code slightly from my previous post,  MyMaps to Spreadsheet, KML to CSV and back (rvnllc.com) .   import sys import xml.etree.ElementTree as ET # KML namespace ns = {"": "http://www.opengis.net/kml/2.2",       "gpstestkml":"http://www.chartcross.co.uk/XML/GPXDATA/1/0"} # Where is "coordinates" in each Placemark? wherecoords = 'Point/coordinates' # Where is "TimeStamp" in each Placemark? wherets = 'TimeStamp/when' # Where is accuracy in each Placemark
Read more

vim my way

Image
The editor known as "vim" in Linux has many features in common with vi, the editor I learned in 1992. I was drafted to convert a slew of Vax programs to Solaris in over a few weeks.  I'd never used Unix. I had a VT-220 terminal that I used on a MicroVax and telnet'd over to the Sun.  The Yellow key was great for the EDT editor.  It was useless on the Sun.   The project manager showed me how to use vi and I started on the project right away. In 1998 I taught a class with at least 30 consultants pretty much the same way it was taught to me. Now it's your turn! On Windows I run Windows Subsystem for Linux (how I installed it could be a topic for another day). vi is linked to vim.   If you know vim on Linux, you can use vi on older Unix systems as well--Solaris, AIX, HPUX, etc.   Out of habit, I'll still type "vi" to start the vim editor.   If you are on a Linux desktop, pop up an xterm window to get to a shell. vim is oriented to the touch typist.  
Read more