Thread Locked This thread is locked - replies are not allowed.



Permlink Replies: 1 - Pages: 1 - Last Post: 21 Nov 24, 13:50 Last Post By: JeffTucker Threads: [ Previous | Next ]
AndreWolff

Posts: 1,158
Registered: 14-Dec-2007
Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 25 Apr 17, 12:30
Attachment MakeMapTiger.png (52.4 KB)
Program MakeMap can generate a Google Earth kml-file to show the photo locations of a photo album made with the jAlbum program. It is also possible to generate a Google Maps web-page to show these locations. By clicking on the way-points on the map, a thumbnail of the picture exposed on that place is showed:



If you click on the thumbnail or the link below the thumbnail, the corresponding slide page will be opened.

You can download this free program from the software download page of my website.

The current version can make Maps for albums made with the PhotoSwipe skin, the Slide Show 4 skin, the FancyBox skin, the Turtle skin (only if check-box 'Make slide pages' on the jAlbum Pages settings is cleared) and the Tiger skin. On request I can extend this program for other skins, but only for skins generating responsive single-page albums and GPS locations support.

Prerequisite for the generation of a map is that your pictures contain GPS information and you enabled the location display on a slide page.

View an example of a generated map with Google Maps (click on the left globe) or Google Earth. These maps show also the tracks generated by a GPS. These tracks are added via the Google Earth program after the conversion of the gpx-tracklog file to a kml-file with my program ConvertTrack.

You should make a link to this map from the index page as you see here for the PhotoSwipe skin or here for the Tigerskin (click on the 3th button). With The Tiger skin you can do that with the Custom link on the Site / Footer tab or with Custom code and with the PhotoSwipe and Slide Show 4 skin you can enter the link on the Links tab.

This program is based on the same function as available in my EditPhotoInfo program, but in this implementation is the GPS information fetched from the html or js file generated by jAlbum, so with jAlbum version 14 it can also be used with original DNG and TIFF files.

For more information view the Helpfile.

Edited by: AndreWolff on 20-Sep-2017 15:01

The new version 1.0.6 supports now too the Tiger skin, see this album and the attached screenshot.

The new version 1.1.2 supports now too the FancyBox skin, see this album.

Update:

The new version 1.3.0. supports now webp-images as introduced in jAlbum version 24.

Edited by: AndreWolff on 4 Jul 2021, 22:00

Update:

In the new version 1.5, the Tiger skin code has been improved and the button URLs do start now also with https:

For the Tiger skin, you can use as Custom code:
<div class="HorNav">
<ul>
<li><a href="tracklog.zip" download>Download GPS track</a></li>
<li><a href="javascript:OpenGoogleMapsRoute()">Route in Google Maps</a></li>
<li><a href="javascript:OpenGoogleEarthRoute()">Route in Google Earth</a></li>
</ul>
</div>
<script>
	function OpenGoogleMapsRoute() { document.location.href="GoogleMap.html"; }
	function OpenGoogleEarthRoute() { window.open("map.kml"); }
</script>
which creates 3 buttons to download and view the GPS track, see in this Tiger album'

You shoud save the GPS track in the output directory as program Makemap does with the map.kml file.

In the Advanced / custom code / CSS styles textbox you should save the CSS code:
.HorNav a:hover, .HorNav a:active, #NavHor a:focus {
	color: #ffff00;  
	background-color: rgba(114,114,114,1.0);
	text-decoration: none; 
	box-shadow: inset 2px 2px 2px 2px rgba(114,114,114,1.0);
}
 
.HorNav{
	margin-bottom: 0px;
	margin-top: 0px;
	text-align: center;
	line-height: 50px;
}
.HorNav a, .HorNav b, .HorNav a:visited {
	display: block;
	text-align: center;
	text-decoration: none;
	margin-right: 0px;
	margin-left: 0px;
	color: #000000;
	background-color: rgba(204,204,204,1.0);	
	padding-right: 10px;
	padding-left: 10px;
	border: 1px solid #000000;
}
.HorNav b {
	color: #ffffff;
	font-weight: bold;
}
 
.HorNav ul {
 display:inline-block;
 list-style-type: none;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
}
.HorNav li {
	float: left;
	width: auto;
}


Edited by: AndreWolff on 28 Oct 2022, 11:36
JeffTucker

Posts: 8,211
Registered: 31-Jan-2006
Re: Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 21 Nov 24, 13:50   in response to: AndreWolff in response to: AndreWolff
For updates to this program, visit:

https://andrewolff.blogspot.com/
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums