| |
| <?php
|
| add_action('wp_enqueue_scripts', function () {
|
| if (!is_page(2029)) {
|
| return;
|
| }
|
|
|
| wp_enqueue_style(
|
| 'leaflet-css',
|
| 'https://unpkg.com/[email protected]/dist/leaflet.css',
|
| array(),
|
| '1.9.4'
|
| );
|
|
|
| wp_enqueue_script(
|
| 'leaflet-js',
|
| 'https://unpkg.com/[email protected]/dist/leaflet.js',
|
| array(),
|
| '1.9.4',
|
| true
|
| );
|
|
|
| wp_add_inline_script('leaflet-js', "
|
| document.addEventListener('DOMContentLoaded', function () {
|
| const mapElement = document.getElementById('treasure-map');
|
| if (!mapElement || typeof L === 'undefined') return;
|
|
|
| const map = L.map('treasure-map').setView([51.5033, -0.1196], 12);
|
|
|
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
| attribution: '© OpenStreetMap contributors'
|
| }).addTo(map);
|
|
|
| const markers = [];
|
|
|
| document.querySelectorAll('.treasure-item').forEach(function (item) {
|
| const lat = Number(item.dataset.lat);
|
| const lng = Number(item.dataset.lng);
|
|
|
| if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;
|
|
|
| const marker = L.marker([lat, lng])
|
| .addTo(map)
|
| .bindPopup(item.dataset.title || 'Free item');
|
|
|
| markers.push({
|
| marker: marker,
|
| lat: lat,
|
| lng: lng,
|
| item: item
|
| });
|
| });
|
|
|
| const locateButton = document.getElementById('locate-me');
|
| if (!locateButton) return;
|
|
|
| locateButton.addEventListener('click', function () {
|
| if (!navigator.geolocation) {
|
| alert('Location is not supported by this browser.');
|
| return;
|
| }
|
|
|
| navigator.geolocation.getCurrentPosition(function (position) {
|
| const userLat = position.coords.latitude;
|
| const userLng = position.coords.longitude;
|
|
|
| map.setView([userLat, userLng], 13);
|
|
|
| L.circleMarker([userLat, userLng], {
|
| radius: 8,
|
| color: '#1769aa',
|
| fillColor: '#1769aa',
|
| fillOpacity: 0.8
|
| }).addTo(map).bindPopup('Your location').openPopup();
|
|
|
| markers.forEach(function (entry) {
|
| const distance = map.distance(
|
| [userLat, userLng],
|
| [entry.lat, entry.lng]
|
| );
|
|
|
| entry.marker.setOpacity(distance <= 10000 ? 1 : 0.25);
|
| });
|
| }, function () {
|
| alert('Location permission was not granted.');
|
| });
|
| });
|
| });
|
| ");
|
| });
|
|
|
| |
| |
Comments