Permlink Replies: 5 - Pages: 1 - Last Post: 12 Sep 24, 15:15 Last Post By: davidekholm
AndreWolff

Posts: 1,159
Registered: 14-Dec-2007
Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 25 Apr 17, 12:30
  Click to reply to this thread Reply
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
AndreWolff

Posts: 1,159
Registered: 14-Dec-2007
Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 23 Oct 22, 20:30   in response to: AndreWolff in response to: AndreWolff
  Click to reply to this thread Reply
The new version 2.1 supports also the PhotoBlogger, the Projector skin and the Story skin and you can now use it to make OpenStreetMap maps.

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

Posts: 3,457
Registered: 18-Oct-2002
Re: Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 8 Apr 24, 13:35   in response to: AndreWolff in response to: AndreWolff
  Click to reply to this thread Reply
Posted on behalf of André:

The new version 2,5 of program MakeMap supports now the Lizard skin, see this album and the Plain skin, see this album and thumbnails may now be used as marker icons.

More information in the release notes.
davidekholm

Posts: 3,457
Registered: 18-Oct-2002
Re: Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 8 Jul 24, 14:58   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
Posted on behalf of André:

With the new version 2.8 of program MakeMap and the Plain skin version 3, it is now possible to open the lightbox by clicking on the maps thumbnail image, without the use of include files see this sample album,
If you select the value -1 after 'Center map around waypoint#:', the map is centered on the midpoint value of all waypoints.
davidekholm

Posts: 3,457
Registered: 18-Oct-2002
Re: Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 14 Aug 24, 17:51   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
Posted on behalf of André:

The new version 2.9 of program MakeMap makes it easy to add multiple tracks to a map, see the release notes,

For an example, see my Plain Schotland album. This album shows both Google Maps and OpenStreetMap maps. How the maps are made is described here and how the buttons, theme images and music is added is described here.
davidekholm

Posts: 3,457
Registered: 18-Oct-2002
Re: Program MakeMap to make an OpenStreetMap or a Google Maps map
Posted: 12 Sep 24, 15:15   in response to: davidekholm in response to: davidekholm
  Click to reply to this thread Reply
Posted on behalf of André:

The new version 3.0 of program MakeMap makes it posssible to display your current position in a map.
See here for examples and more information.
Legend
Forum admins
Helpful Answer
Correct Answer

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