 This montage of three screenshots illustrates the functionality: map icon is added into album page, which links to a flag on map (the red one), when the mouse is placed over the flag image from the album is shown. |
The script album-mapflags serves for creating links from HTML photo album to locations on a map. I use it to post-process photo albums generated by album, but it could work with another software as well. Upon clicking on the map icon in the album page, the map page appears. The map contains a flag for each location which links to it from the album, the flag corresponding to the referring location is highlighted. The flags on the map can be clicked as well, they lead to the linked album or image – see a map of a trip to Provence as an example.
|
This montage of three screenshots illustrates the functionality: map icon is added into album page, which links to a flag on map (the red one), when the mouse is placed over the flag image from the album is shown. |
The link to the map is created in a form of an HTML comment such as:
<!-- MAP_MARKER provence 160 430 mill MAP_IMAGE tn/060819_25.med.jpg -->
inside the header.txt, captions.txt or footer.txt file – wherever should the map icon appear. After the album script generates the album, the user has to run album-mapflags to replace MAP_MARKER comments by links to the map(s).
The script requires only standard software, which should be already on your system: bash, find, grep, awk, sed, convert. Download album-mapflags.tar.gz into the root directory of your album and unpack it:
youralbum> tar xvzf album-mapflags.tar.gz
It will create directory .maps with following contents:
| files in the package: | |
|---|---|
| .maps/ | the directory for album-mapflags |
| .maps/.scripts/ | directory with internal scripts |
| .maps/.icons/ | directory with icons |
| .maps/album-mapflags | main script |
| .maps/config.sh | main configuration file |
| .maps/index.html | empty, so that the directory listing cannot be seen from web |
The script is run from the root album directory:
youralbum> .maps/album-mapflags
Warning/Disclaimer: I strongly recommend to backup your album before running album-mapflags for the first time. When working correctly, only the map markers in HTML should be changed, however it has been tested only by me so far. I cannot accept responsibility for any damage done to your files by the script.
For each map you want to use, you have to create .maps/mapname/ directory and place a map image named 1.jpg inside. The map image will be used as background and it should be quite dark, so that the default bright flags are well visible (unless you want to use your own dark flags on a bright map). The contents of the directory will be:
| .maps/mapname/ | directory for your map, you can have more of them |
| .maps/mapname/1.jpg | image file with the map |
| .maps/mapname/config.sh | optional local configuration file, can override the main one |
| generated files: | |
|---|---|
| .maps/mapname/map1.html | map HTML page |
| .maps/mapname/index.html | link to the map page |
| .maps/mapname/tn/* | images that pop-up over the map |
The tag is an HTML one-line comment (do not split it into several lines) in the from:
<!-- MAP_MARKER mapname x y markername [WAITsuffixw] [MAP_IMAGE mouseoverimage] -->
With the parameters:
mapname mapname as in .maps/mapname
x x-coordinate of top-left flag corner in the map image 1.jpg
y y-coordinate of top-left flag corner in the map image 1.jpg
markername unique marker identification, used only internally, no spaces etc.
optional:
suffixw placing of mapicon into album page will be delayed until WAITsuffixw string is found
mouseoverimage path to image whose rescaled version will be displayed on mouse-over
it is relative path from the album directory, e.g. tn/060819_25.med.jpg
if you want to use the medium size of image 060819_25.jpg
Every occurrence of the tag in album HTML pages will be replaced by the map icon and flag will be added to the map. With album, the HTML files are generated from text files based on a theme. The tag has to be placed into the text file, at such place, that it will appear in the HTML exactly once. The header.txt and footer.txt should satisfy this requirement. Whether it can be placed also in the image caption depends on the theme – the caption has to appear only once, either in album.th or image.th. The link from the map will lead to the corresponding page – either album or image. The script attempts to add the name of the album from captions.txt to the mouse-over image as its caption, regardless whether it links to album or image.
It is possible to create a set of different flags for different types of locations or different map icons for different maps. It is done by placing your flags/icon image files into map directory, they will override the default ones:
| .maps/mapname/mapicon.png | custom map icon, overrides the default one |
| .maps/mapname/marker-off.png | custom flag for marking position on the map |
| .maps/mapname/marker-on.png | custom highlighted flag |
| .maps/mapname/marker*-off.png | optional additional marker |
| .maps/mapname/marker*-on.png | highlighted additional marker |
The map icon is chosen automatically according to the map, to select a type of flag you append a suffix to MAP_MARKER tag, e.g. MAP_MARKER2 for marker2-off.png, marker2-on.png.
Without WAIT* parameter, the map icon is placed in the place of the MAP_MARKER tag. If you want to e.g. add the map icon right after the album name (as in screenshot), you cannot do it directly, album name appears more than once and tag cannot be placed into it, and header.txt is printed before the album name (of course, that depends on theme). With e.g. WAITMAPFLAG parameter, you can place into album.th a line like
<!--WAITMAPFLAG-->
and the map icon will be placed right after this line (MAP_MARKER tag has to appear before this line). You can place multiple different WAIT* into your template to have choice over the placement of a single icon, or you can place multiple icons at single WAIT* location, but you cannot place different icons at different locations in one page.
It is possible to have two (or more) different sets of the mouseover images, e.g. for my map of hikes in Switzerland I have one set with landscapes and second set with people. It is possible to switch between the landscape and people mode with "KRAJINA<->LIDI" (that's Czech) link at the top-left corner of the map. To create a map with multiple modes, you have to modify two variables in .maps/mapname/config.sh:
MAPMODES=2 MODESWITCH=LANDSCAPE\<\;-\>\;PEOPLE
and specify multiple images in MAP_MARKER tag, e.g.:
<!-- MAP_MARKER switzerland 430 575 monterosa WAITMAPFLAG MAP_IMAGE tn/050904_12.med.jpg tn/050904_15.med.jpg -->
The maps for additional modes are generated into files .maps/mapname/map2.html etc.
There are a few more paramateres which can be set in the config.sh (either global in .maps/ or local in .maps/mapname/):
# width of the pop-up images on map (more precisely maximal dimension) MAPIMAGEWIDTH=200 # link to album page from the map (can be set to some subalbum) ALBUMLINK=../../index.html
The map header .maps/.scripts/mapheader.html can be also edited, e.g. to change character encoding. Be careful though not to "damage" the javascript code that displays pop-up images on mouse-over.