<link rel=”stylesheet” href=”https://unpkg.com/leaflet@1.9.4/dist/leaflet.css” />
<script src=”https://unpkg.com/leaflet@1.9.4/dist/leaflet.js”></script>

<?php
$locations = [];
$gpx_routes = [];
$args = array(
‘post_type’ => array(‘post_type_1’, ‘post_type_2’),
‘posts_per_page’ => -1
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$lat = get_field(‘latitude’); // Replace with your custom field name
$lng = get_field(‘longitude’); // Replace with your custom field name
$link = get_permalink();
$title = get_the_title();
$post_type = get_post_type();
if ($lat && $lng) {
$locations[] = array(
‘lat’ => $lat,
‘lng’ => $lng,
‘link’ => $link,
‘title’ => $title,
‘post_type’ => $post_type
);
}
if ($post_type == ‘your_post_type_with_gpx’) { // Replace with your post type
$gpx_url = get_field(‘gpx_file’); // Replace with your custom field name
if ($gpx_url) {
$gpx_routes[] = $gpx_url;
}
}
}
wp_reset_postdata();
}

?>
<!– <div id=”map” style=”height: 500px;”></div> –>


<script>
document.addEventListener(‘DOMContentLoaded’, function () {
var map = L.map(‘map’).setView([51.505, -0.09], 5);

L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attribution: ‘&copy; <a href=”https://www.openstreetmap.org/copyright”>OpenStreetMap</a> contributors’
}).addTo(map);

var locations = <?php echo json_encode($locations); ?>;
locations.forEach(function(location) {
var markerOptions = {};
if (location.post_type === ‘post_type_1’) {
markerOptions = { icon: new L.Icon({ iconUrl: ‘path/to/icon1.png’, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }) };
} else if (location.post_type === ‘post_type_2’) {
markerOptions = { icon: new L.Icon({ iconUrl: ‘path/to/icon2.png’, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }) };
}
L.marker([location.lat, location.lng], markerOptions).addTo(map)
.bindPopup(‘<a href=”‘ + location.link + ‘”>’ + location.title + ‘</a>’);
});

var gpxRoutes = <?php echo json_encode($gpx_routes); ?>;
gpxRoutes.forEach(function(gpxUrl) {
new L.GPX(gpxUrl, {
async: true
}).on(‘loaded’, function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
});
});
</script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js”></script>