Can I use my own map tiles

Dear @bfletcher,
First of all, thank you for your support ??

It is not possible to do that without a little bit of javascript code, but I will gladly help you with it if you are not familiar with it!

As you may know, Travelers’ Map is using LeafletJS to generate a map.
In their documentation, there is a part about ImageOverlay, and I think this is exactly what you want !
https://leafletjs.com/reference-1.7.1.html#imageoverlay
What you need is that :

• An image (the bigger the better, so you can zoom on it)
• The top left and bottom right coordinate of your image on the map

Then, you have the example code :
var imageUrl = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
Here you define the image URL, you can upload it in your WordPress media library and copy / paste the URL.
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
This is the top-left corner and bottom-right corner latitude/longitude of the image.
L.imageOverlay(imageUrl, imageBounds).addTo(cttm_map[0]);
Finally, we add the image to our map ??
I’ve added cttm_map[0] in the code above. This is the way to target a map generated by my plugin (more precisely, the first map added to the page; the second would have been cttm_map[1], etc…)

Finally, you have to wait for the map to be initiated before launching this script (or you will get an error), that’s why I’ve created an event so you can listen for it.

Here is the final code, you can add it into your theme’s script.js or in a <script> tag just before the end of your html </body> tag (generally in your footer.php file). If you don’t know what I’m talking about, please tell me, I will get back to you:

<script>
// Listen for the event, wait for the map to be initiated
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map is an array of all the maps included in the page, so we loop through each, in case their is multiple maps on the page.
  for (var i = 0; i < cttm_map.length; i++) {
    //We add the image URL and image bounds (please change this with your image)
var imageUrl = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
//Finally, add the image to the map
L.imageOverlay(imageUrl, imageBounds).addTo(cttm_map[i]);
  }
}, false);
</script>

Note: If you copy/paste this code without changing the image url and bounds, you will have an image inserted above Newark, New Jersay (west of New York City)
Note 2: Please note that the image will not be shown on your administration panel.

Let me know if you succeed with your image ??
Best regards, Camille

• This reply was modified 3 years, 9 months ago by Camille V.

Thank You for such a detailed and helpful reply Camille,
I think I can do all that so will have a go at it and let you know
Best Regards Bruce

• This reply was modified 3 years, 9 months ago by bfletcher.