SOLUTION: Thumbnails not showing on map

Many of my blog posts relate to a trip of some kind, and I’ve been using the WP-GPX-Maps plugin for a number of years to include a graphical representation of any GPS tracks laid down along the way. Those same posts invariably also feature photos, and although I’ve often thought how neat it would be to also include those on the same map, I’ve not found a single, low maintenance solution to show track logs and photos in the same interactive element.

That is, until WP-GPX-Maps was modified to include the ability to show all attached images with GPS EXIF data – no additional gallery plugins or uploads, just include an extra parameter in the shortcode and you’re golden. Except I couldn’t get it to work. The little white markers would appear on the page in what looked like the right place, but they just show ‘null’ instead of my thumbnail, with the JS console also giving a 404 error for each missing image.

After some investigation it appears that the client-side script which builds a hidden DIV containing those thumbnails was looking in the wrong place, for the thumbnail data, or, more precisely, WordPress has recently started rendering images and galleries differently, and WP-GPX-Maps hasn’t been updated yet to take into account the resulting new DOM structure.

Before I show you how to get it working on new posts created with the Gutenberg editor (I presume that’s where the change was made) know this: if you have older posts on your site where the WP-GPX-Maps do work with attached images, this will break those. For me that’s not an issue, because when Gutenberg came along I needed to change a bunch of CSS to maintain constant look & feel among newly created posts, and because I didn’t want to maintain two versions of CSS I spent a weekend updating all my older posts using Gutenberg. Rock and Roll.

WP-GPX-Maps.js

This is the main client-side script. It uses jQuery to build an array of images from the contents of a DIV which are then rendered on the map using leaflet.js. That DIV looks something like this:

<div id="ngimages_2906_1902867" class="ngimages" style="display:block;position:absolute;left:-50000px">
	<span lat="54.3223027778" lon="-4.38215555556">
		<a href="https://www.blog.net/wp-content/uploads/IMG.jpg">
			<img width="105" height="42" src="https://www.blog.net/wp-content/uploads/IMG.jpg" class="attachment-105x105 size-105x105"
				alt="some image" srcset="https://www.blog.net/wp-content/uploads/IMG-200x80.jpg 200w,
					https://www.blog.net/wp-content/uploads/IMG-300x120.jpg 300w,
					https://www.blog.net/wp-content/uploads/IMG-768x307.jpg 768w,
					https://www.blog.net/wp-content/uploads/IMG-800x320.jpg 800w,
					https://www.blog.net/wp-content/uploads/IMG.jpg 1800w"
				sizes="(max-width: 105px) 100vw, 105px"
				data-attachment-id="2907"
				data-permalink="https://www.blog.net/circular-cycle-ride/img_1719/"
				data-orig-file="https://www.blog.net/wp-content/uploads/IMG.jpg"
				data-orig-size="1800,720" data-comments-opened="0"
				data-image-meta="{"aperture":"1.8","credit":"","camera":"iPhone XS","caption":"","created_timestamp":"1564673056",
					"copyright":"Image copyright 2018 blog.net. All rights reserved. Commercial use prohibited - contact [email protected] for info.",
					"focal_length":"4.25","iso":"25","shutter_speed":"0.000362976406534","title":"",
					"orientation":"1"}"
				data-image-title="some image" data-image-description data-medium-file="https://www.blog.net/wp-content/uploads/IMG-300x120.jpg"
				data-large-file="https://www.blog.net/wp-content/uploads/IMG-800x320.jpg">
		</a>
	</span>
	<span lat="54.0748416667" lon="-4.65309166667">…</span>
	<span lat="54.2318388889" lon="-4.40556111111">…</span>
	<span lat="54.1431361111" lon="-4.46858055556">…</span>
	…
</div>

If you look at around line 862 of WP-GPX-Maps.js you’ll see the array being built from this data, specifically:

"name": ngg_span_a.getAttribute("data-title"),
"url": ngg_span_a.getAttribute("data-src"),
"thumbnail": ngg_span_a.getAttribute("data-thumbnail”)

These three lines of JS expect to find the image title (caption) as well as two image URLs (one that’s shown on the map, a second larger version that’s shown when you click on the first) all as data elements on the A tag. But since Gutenberg (probably) they’re no longer on the A tag, they’re now on the IMG tag, which is A’s first child. So just change those three lines to:

"name": ngg_span_a.children[0].getAttribute("data-image-title"),
"url": ngg_span_a.children[0].getAttribute("src"),
"thumbnail": ngg_span_a.children[0].getAttribute("src")

I’m using the same image for the ‘big’ version as the thumbnail to overcome some odd behaviour with the map markers, whereby the the marker jumps around on the map when you click on it for the first time and load a bigger version of the thumbnail. Using the same file for both seems to overcome this, and I don’t think it’s much of a loss since the thumbnail is detailed enough for what it needs to do, and in any case the full-size image is already probably on the page somewhere.