☰

Geocaching Trackable Map Visualizer

View your trackables on an interactive map. See where all your Geocaching trackables have been at a glance!

// ==UserScript==
// @name         Geocaching Trackable Map Visualizer
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  View your trackables on an interactive map. See where all your Geocaching trackables have been at a glance!
// @author       ViezeVingertjes
// @match        *://*.geocaching.com/track/search.aspx*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geocaching.com
// @grant        none
// @require      https://unpkg.com/[email protected]/dist/leaflet.js
// @resource     LEAFLET_CSS https://unpkg.com/[email protected]/dist/leaflet.css
// ==/UserScript==

(function() {
    'use strict';

    // Inject Leaflet CSS
    const linkElement = document.createElement('link');
    linkElement.rel = 'stylesheet';
    linkElement.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
    document.head.appendChild(linkElement);

    console.log("Geocaching Trackable Page Enhancer script loaded!");

    /**
     * Helper function to check if an element is visible
     * @param {Element} element - The DOM element to check
     * @returns {boolean} - Whether the element is visible
     */
    function isElementVisible(element) {
      if (!element) return false;

      const style = window.getComputedStyle(element);
      return style.display !== 'none' &&
             style.visibility !== 'hidden' &&
             style.opacity !== '0' &&
             element.offsetWidth > 0 &&
             element.offsetHeight > 0;
    }

    /**
     * Extracts trackable information from anchor elements on the page
     * @returns {Map} Map of trackable objects with id as key
     */
    function extractTrackablesFromPage() {
      const anchorElements = document.querySelectorAll("a");
      const trackablesMap = new Map();
      const trackableUrlPrefix = "https://www.geocaching.com/track/details.aspx?id=";

      anchorElements.forEach(anchor => {
        const href = anchor.getAttribute("href");
        if (href && href.startsWith(trackableUrlPrefix)) {
          try {
            const url = new URL(href, document.baseURI);
            const id = url.searchParams.get("id");
            const name = anchor.innerText.trim();

            if (id && name && !trackablesMap.has(id)) {
              trackablesMap.set(id, { id, name });
            }
          } catch (e) {
            console.error("Error parsing URL or extracting trackable info:", e, href);
          }
        }
      });

      return trackablesMap;
    }

    /**
     * Parse trackable stops from the map page HTML content
     * @param {string} htmlContent - HTML content from the trackable map page
     * @param {string} trackableId - ID of the trackable for error reporting
     * @returns {Array} Array of stop objects with coordinates and cache names
     */
    function parseTrackableStops(htmlContent, trackableId) {
      const stops = [];
      const tbStopsRegex = /var tbStops\s*=\s*(\[[\s\S]*?\])\s*;/;
      const match = htmlContent.match(tbStopsRegex);

      if (!match || !match[1]) {
        console.warn(`tbStops not found for trackable ${trackableId}`);
        return stops;
      }

      try {
        const arrayContentString = match[1].slice(1, -1); // Remove outer brackets
        const objectRegex = /{[\s\S]*?}/g;
        const coordRegex = /ll\s*:\s*\[\s*([\d\.-]+)\s*,\s*([\d\.-]+)\s*\]/;
        const nameRegex = /n\s*:\s*"([^"]*)"/;
        let objectMatch;

        while ((objectMatch = objectRegex.exec(arrayContentString)) !== null) {
          const objectString = objectMatch[0];
          const coordMatch = objectString.match(coordRegex);
          const nameMatch = objectString.match(nameRegex);

          if (coordMatch && coordMatch[1] && coordMatch[2] && nameMatch && nameMatch[1]) {
            try {
              const lat = parseFloat(coordMatch[1]);
              const lon = parseFloat(coordMatch[2]);
              const name = nameMatch[1];
              stops.push({
                coordinates: [lat, lon],
                cacheName: name
              });
            } catch (e) {
              console.error(`Error parsing coordinates for trackable ${trackableId}:`, e);
            }
          } else {
            console.error(`Failed to extract data from object string for trackable ${trackableId}:`, objectString);
          }
        }
      } catch (e) {
        console.error(`Error processing tbStops for trackable ${trackableId}:`, e);
      }

      return stops;
    }

    /**
     * Fetches and processes trackable stops data
     * @param {Object} trackable - The trackable object to enrich with stops
     * @returns {Object} The enriched trackable object
     */
    async function fetchTrackableStops(trackable) {
      const mapUrl = `https://www.geocaching.com/track/map_gm.aspx?ID=${trackable.id}`;

      try {
        const response = await fetch(mapUrl);
        if (!response.ok) {
          console.error(`Failed to fetch ${mapUrl}: ${response.status} ${response.statusText}`);
          trackable.stops = [];
          return trackable;
        }

        const htmlContent = await response.text();
        trackable.stops = parseTrackableStops(htmlContent, trackable.id);

      } catch (error) {
        console.error(`Error fetching stops for trackable ${trackable.id}:`, error);
        trackable.stops = [];
      }

      return trackable;
    }

    /**
     * Enriches trackables with their stop information
     * @param {Array} trackables - Array of trackable objects
     * @returns {Array} Array of enriched trackable objects
     */
    async function enrichTrackablesWithStops(trackables) {
      if (trackables.length === 0) {
        console.log("No trackables found to enrich.");
        return [];
      }

      const enrichedTrackables = await Promise.all(
        trackables.map(trackable => fetchTrackableStops(trackable))
      );

      console.log("Enriched Trackables (with stops):", enrichedTrackables);
      return enrichedTrackables;
    }

    // Add a global variable to track if processing is currently in progress
    let isProcessingTrackables = false;
    // Add a global variable to store the map instance
    let trackableMap = null;

    /**
     * Displays the trackable data on a map
     * @param {Array} trackables - Array of trackable objects with stops
     * @param {HTMLElement} [existingContainer] - Optional existing map container
     */
    function displayTrackablesMap(trackables, existingContainer) {
      // Filter trackables with stops
      const trackablesWithStops = trackables.filter(t => t.stops && t.stops.length > 0);

      if (trackablesWithStops.length === 0) {
        console.log('No trackables with stops to display on map');
        return;
      }

      // Sort trackables by number of stops (descending)
      trackablesWithStops.sort((a, b) => b.stops.length - a.stops.length);

      // Extract the last stop from each trackable
      const mapPoints = trackablesWithStops.map(trackable => {
        const lastStop = trackable.stops[trackable.stops.length - 1];
        return {
          trackableId: trackable.id,
          trackableName: trackable.name,
          cacheName: lastStop.cacheName,
          coordinates: lastStop.coordinates,
          totalStops: trackable.stops.length
        };
      });

      console.log('Map points for display:', mapPoints);

      // Group points by coordinates to combine markers at the same location
      const groupedPoints = {};
      mapPoints.forEach(point => {
        const coordKey = point.coordinates.join(',');
        if (!groupedPoints[coordKey]) {
          groupedPoints[coordKey] = {
            coordinates: point.coordinates,
            cacheName: point.cacheName, // Use the cache name from the first trackable at this location
            trackables: []
          };
        }
        groupedPoints[coordKey].trackables.push(point);
      });

      console.log('Grouped map points:', groupedPoints);

      // Convert back to array for display and sort by total number of trackables (descending)
      const combinedMapPoints = Object.values(groupedPoints);
      combinedMapPoints.sort((a, b) => b.trackables.length - a.trackables.length);

      // If we don't have a map instance, we can't proceed
      if (!trackableMap) {
        console.error('No map instance available');
        return;
      }

      // Remove any loading message
      const loadingControl = document.querySelector('.loading-message');
      if (loadingControl && loadingControl.parentNode) {
        loadingControl.parentNode.removeChild(loadingControl);
      }

      // Clear any existing markers
      trackableMap.eachLayer(layer => {
        if (layer instanceof L.Marker || layer instanceof L.Tooltip) {
          trackableMap.removeLayer(layer);
        }
      });

      // Calculate bounding box for all points
      let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180;

      combinedMapPoints.forEach(point => {
        const [lat, lon] = point.coordinates;
        minLat = Math.min(minLat, lat);
        maxLat = Math.max(maxLat, lat);
        minLon = Math.min(minLon, lon);
        maxLon = Math.max(maxLon, lon);
      });

      // Add padding
      const latPadding = Math.max(0.05, (maxLat - minLat) * 0.1);
      const lonPadding = Math.max(0.05, (maxLon - minLon) * 0.1);

      minLat = Math.max(-85, minLat - latPadding);
      maxLat = Math.min(85, maxLat + latPadding);
      minLon = Math.max(-180, minLon - lonPadding);
      maxLon = Math.min(180, maxLon + lonPadding);

      // Fit the map to the bounds of all markers
      try {
        trackableMap.fitBounds([
          [minLat, minLon],
          [maxLat, maxLon]
        ]);
      } catch (e) {
        console.error('Error fitting map bounds:', e);
      }

      // Store markers for reference
      const markers = [];

      // Define a good palette of distinct colors
      const colorPalette = [
        '#e6194B', // Red
        '#3cb44b', // Green
        '#ffe119', // Yellow
        '#4363d8', // Blue
        '#f58231', // Orange
        '#911eb4', // Purple
        '#42d4f4', // Cyan
        '#f032e6', // Magenta
        '#bfef45', // Lime
        '#fabed4', // Pink
        '#469990', // Teal
        '#dcbeff', // Lavender
        '#9A6324', // Brown
        '#fffac8', // Beige
        '#800000', // Maroon
        '#aaffc3', // Mint
        '#808000', // Olive
        '#ffd8b1', // Apricot
        '#000075', // Navy
        '#a9a9a9', // Grey
        '#ffffff', // White
        '#000000'  // Black
      ];

      // Create a map to track used colors for cache names
      const cacheColorMap = new Map();
      // Track last used color index for round-robin assignment
      let lastColorIndex = -1;

      // Get a color ensuring no consecutive identical colors
      function getColorForCache(cacheName) {
        // If we already assigned a color to this cache, use it
        if (cacheColorMap.has(cacheName)) {
          return cacheColorMap.get(cacheName);
        }

        // Get the next color in round-robin fashion
        lastColorIndex = (lastColorIndex + 1) % colorPalette.length;

        // Find a different color if this would create consecutive same colors
        if (markers.length > 0) {
          const prevMarker = markers[markers.length - 1];
          const prevColor = getColorForCache(prevMarker.point.cacheName);

          // If colors would match, skip to next color
          if (colorPalette[lastColorIndex] === prevColor) {
            lastColorIndex = (lastColorIndex + 1) % colorPalette.length;
          }
        }

        const color = colorPalette[lastColorIndex];
        cacheColorMap.set(cacheName, color);
        return color;
      }

      // Add markers for each point
      combinedMapPoints.forEach((point, index) => {
        const [lat, lon] = point.coordinates;
        const trackables = point.trackables;
        const trackableCount = trackables.length;

        // Sort trackables at this location by number of stops (descending)
        trackables.sort((a, b) => b.totalStops - a.totalStops);

        // Get a color based on cache name
        const markerColor = getColorForCache(point.cacheName);

        // Create popup content with basic information
        let popupContent = `
          <div>
            <div style="font-weight: bold; margin-bottom: 5px;">${point.cacheName}</div>
            <div style="font-size: 12px; color: #666; margin-bottom: 8px;">Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}</div>
        `;

        if (trackables.length > 1) {
          popupContent += `<div style="font-weight: bold; margin-bottom: 8px; color: ${markerColor};">${trackables.length} Trackables at this Location</div>`;
        }

        // Add each trackable with simple formatting
        trackables.forEach((tb, i) => {
          popupContent += `
            <div style="margin-top: 8px; ${i > 0 ? 'border-top: 1px solid #eee; padding-top: 8px;' : ''}">
              <div style="font-weight: bold;">${i+1}. ${tb.trackableName}</div>
              ${tb.totalStops ? `<div style="font-size: 12px; color: #666;">Total stops: ${tb.totalStops}</div>` : ''}
              <div><a href="https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}" target="_blank" style="color: #007bff; text-decoration: none;">View trackable details</a></div>
            </div>
          `;
        });

        popupContent += '</div>';

        // Create a colored marker for this point
        const markerIcon = L.divIcon({
          className: '',
          html: `<div style="background-color: ${markerColor}; width: 24px; height: 24px; border-radius: 12px; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.4);"></div>`,
          iconSize: [28, 28],
          iconAnchor: [14, 14]
        });
        const marker = L.marker([lat, lon], { icon: markerIcon }).addTo(trackableMap);

        // Add a label for the marker
        const labelText = point.cacheName + (trackables.length > 1 ? ` (${trackables.length})` : '');

        const label = L.tooltip({
          permanent: true,
          direction: 'top',
          className: 'trackable-marker-label',
          offset: [0, -12]
        })
        .setContent(labelText)
        .setLatLng([lat, lon]);

        label.addTo(trackableMap);

        // Bind popup to marker
        marker.bindPopup(popupContent);

        // Hide label when popup is open
        marker.on('popupopen', function() {
          trackableMap.removeLayer(label);
        });

        // Show label when popup is closed
        marker.on('popupclose', function() {
          label.addTo(trackableMap);
        });

        markers.push({
          marker,
          label,
          point
        });
      });

      // Update the legend
      const mapSection = existingContainer.closest('#gc-trackables-map-section');
      const legendContainer = mapSection ? mapSection.querySelector('#trackables-map-legend') : null;

      if (legendContainer) {
        // Get the content container
        const legendContent = document.getElementById('trackables-map-legend-content');
        if (!legendContent) return;

        // Clear any existing content
        legendContent.innerHTML = '';

        // Add entries for each marker/location
        markers.forEach((markerData, index) => {
          const { marker, point, label } = markerData;
          const trackables = point.trackables;

          // For each location, create a section
          const sectionContainer = document.createElement('div');
          sectionContainer.style.marginBottom = index < markers.length - 1 ? '10px' : '0';
          sectionContainer.style.paddingBottom = index < markers.length - 1 ? '10px' : '0';
          sectionContainer.style.borderBottom = index < markers.length - 1 ? '1px solid #eee' : 'none';

          // Location header
          const locationHeader = document.createElement('div');
          locationHeader.style.display = 'flex';
          locationHeader.style.alignItems = 'center';
          locationHeader.style.marginBottom = '5px';
          locationHeader.style.cursor = 'pointer';

          // Create color dot to match marker color
          const colorDot = document.createElement('span');
          colorDot.style.width = '16px';
          colorDot.style.height = '16px';
          colorDot.style.borderRadius = '50%';
          colorDot.style.backgroundColor = getColorForCache(point.cacheName);
          colorDot.style.display = 'inline-block';
          colorDot.style.marginRight = '8px';
          colorDot.style.border = '1px solid rgba(0,0,0,0.2)';

          locationHeader.appendChild(colorDot);

          // Location text
          let locationText;
          locationText = document.createElement('div');

          if (trackables.length === 1) {
            locationText.textContent = trackables[0].cacheName;
          } else {
            locationText.textContent = `${point.cacheName} (${trackables.length} trackables)`;
          }

          locationText.style.fontWeight = 'bold';
          locationHeader.appendChild(locationText);

          // Add click event to zoom to marker
          locationHeader.addEventListener('click', () => {
            trackableMap.setView(marker.getLatLng(), 15);

            // Slight delay to ensure map has completed moving before opening popup
            setTimeout(() => {
              marker.openPopup();
            }, 300);
          });

          // Add hover effect
          locationHeader.addEventListener('mouseenter', () => {
            locationHeader.style.backgroundColor = '#f0f0f0';
          });

          locationHeader.addEventListener('mouseleave', () => {
            locationHeader.style.backgroundColor = '';
          });

          sectionContainer.appendChild(locationHeader);

          // Add individual trackable items if there are multiple at this location
          if (trackables.length > 1) {
            const trackablesList = document.createElement('div');
            trackablesList.style.marginLeft = '24px';

            trackables.forEach((tb, i) => {
              const trackableItem = document.createElement('div');
              trackableItem.style.padding = '3px 0';
              trackableItem.style.fontSize = '12px';
              trackableItem.style.display = 'flex';
              trackableItem.style.alignItems = 'center';
              trackableItem.style.cursor = 'pointer';

              const bulletPoint = document.createElement('span');
              bulletPoint.textContent = '•';
              bulletPoint.style.marginRight = '5px';
              trackableItem.appendChild(bulletPoint);

              const tbName = document.createElement('span');
              tbName.innerHTML = `<span style="font-weight: bold;">${tb.trackableName}</span>${tb.totalStops ? ` (${tb.totalStops} stops)` : ''}`;
              trackableItem.appendChild(tbName);

              // Add click handler to open trackable page
              trackableItem.addEventListener('click', () => {
                window.open(`https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}`, '_blank');
              });

              // Add hover effect
              trackableItem.addEventListener('mouseenter', () => {
                trackableItem.style.backgroundColor = '#f0f0f0';
                trackableItem.style.color = '#0066cc';
              });

              trackableItem.addEventListener('mouseleave', () => {
                trackableItem.style.backgroundColor = '';
                trackableItem.style.color = '';
              });

              trackablesList.appendChild(trackableItem);
            });

            sectionContainer.appendChild(trackablesList);
          } else if (trackables.length === 1) {
            // Make single trackable clickable too
            const tb = trackables[0];
            const trackableItem = document.createElement('div');
            trackableItem.style.marginLeft = '28px';
            trackableItem.style.fontSize = '12px';
            trackableItem.style.cursor = 'pointer';
            trackableItem.style.display = 'flex';
            trackableItem.style.alignItems = 'center';

            const bulletPoint = document.createElement('span');
            bulletPoint.textContent = '•';
            bulletPoint.style.marginRight = '5px';
            trackableItem.appendChild(bulletPoint);

            const tbName = document.createElement('span');
            tbName.innerHTML = `<span style="font-weight: bold;">${tb.trackableName}</span>${tb.totalStops ? ` (${tb.totalStops} stops)` : ''}`;
            trackableItem.appendChild(tbName);

            // Add click handler to open trackable page
            trackableItem.addEventListener('click', () => {
              window.open(`https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}`, '_blank');
            });

            // Add hover effect
            trackableItem.addEventListener('mouseenter', () => {
              trackableItem.style.backgroundColor = '#f0f0f0';
              trackableItem.style.color = '#0066cc';
            });

            trackableItem.addEventListener('mouseleave', () => {
              trackableItem.style.backgroundColor = '';
              trackableItem.style.color = '';
            });

            sectionContainer.appendChild(trackableItem);
          }

          legendContent.appendChild(sectionContainer);
        });
      }
    }

    /**
     * Creates a map using Leaflet
     * @param {HTMLElement} container - The container to add the map to
     * @param {Array} points - The points to display on the map
     */
    function createSimpleMapWithMarkers(container, points) {
      if (!container || !points || points.length === 0) return;

      // Calculate bounding box for all points
      let minLat = 90;
      let maxLat = -90;
      let minLon = 180;
      let maxLon = -180;

      points.forEach(point => {
        const [lat, lon] = point.coordinates;
        minLat = Math.min(minLat, lat);
        maxLat = Math.max(maxLat, lat);
        minLon = Math.min(minLon, lon);
        maxLon = Math.max(maxLon, lon);
      });

      // Add padding
      const latPadding = Math.max(0.05, (maxLat - minLat) * 0.1);
      const lonPadding = Math.max(0.05, (maxLon - minLon) * 0.1);

      minLat = Math.max(-85, minLat - latPadding);
      maxLat = Math.min(85, maxLat + latPadding);
      minLon = Math.max(-180, minLon - lonPadding);
      maxLon = Math.min(180, maxLon + lonPadding);

      // Clear the container
      container.innerHTML = '';

      // Create map container for Leaflet
      const mapViewContainer = document.createElement('div');
      mapViewContainer.id = 'leaflet-map';
      mapViewContainer.style.width = '100%';
      mapViewContainer.style.height = '500px';
      mapViewContainer.style.border = '1px solid #ddd';
      mapViewContainer.style.borderRadius = '4px';
      container.appendChild(mapViewContainer);

      // Initialize the map
      const map = L.map('leaflet-map').fitBounds([
        [minLat, minLon],
        [maxLat, maxLon]
      ]);

      // Add OpenStreetMap tile layer
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18
      }).addTo(map);

      // Add custom CSS for marker labels
      const style = document.createElement('style');
      style.textContent = `
        .trackable-marker-label {
          background: white;
          border: 1px solid #333;
          border-radius: 4px;
          padding: 2px 6px;
          font-weight: bold;
          white-space: nowrap;
          text-align: center;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          pointer-events: none;
        }
      `;
      document.head.appendChild(style);

      // Store markers for reference
      const markers = [];

      // Define a good palette of distinct colors
      const colorPalette = [
        '#e6194B', // Red
        '#3cb44b', // Green
        '#ffe119', // Yellow
        '#4363d8', // Blue
        '#f58231', // Orange
        '#911eb4', // Purple
        '#42d4f4', // Cyan
        '#f032e6', // Magenta
        '#bfef45', // Lime
        '#fabed4', // Pink
        '#469990', // Teal
        '#dcbeff', // Lavender
        '#9A6324', // Brown
        '#fffac8', // Beige
        '#800000', // Maroon
        '#aaffc3', // Mint
        '#808000', // Olive
        '#ffd8b1', // Apricot
        '#000075', // Navy
        '#a9a9a9', // Grey
        '#ffffff', // White
        '#000000'  // Black
      ];

      // Create a map to track used colors for cache names
      const cacheColorMap = new Map();
      // Track last used color index for round-robin assignment
      let lastColorIndex = -1;

      // Get a color ensuring no consecutive identical colors
      function getColorForCache(cacheName) {
        // If we already assigned a color to this cache, use it
        if (cacheColorMap.has(cacheName)) {
          return cacheColorMap.get(cacheName);
        }

        // Get the next color in round-robin fashion
        lastColorIndex = (lastColorIndex + 1) % colorPalette.length;

        // Find a different color if this would create consecutive same colors
        if (markers.length > 0) {
          const prevMarker = markers[markers.length - 1];
          const prevColor = getColorForCache(prevMarker.point.cacheName);

          // If colors would match, skip to next color
          if (colorPalette[lastColorIndex] === prevColor) {
            lastColorIndex = (lastColorIndex + 1) % colorPalette.length;
          }
        }

        const color = colorPalette[lastColorIndex];
        cacheColorMap.set(cacheName, color);
        return color;
      }

      // Add markers for each point
      points.forEach((point, index) => {
        const [lat, lon] = point.coordinates;
        const trackables = point.trackables;
        const trackableCount = trackables.length;

        // Sort trackables at this location by number of stops (descending)
        trackables.sort((a, b) => b.totalStops - a.totalStops);

        // Get a color based on cache name hash for better distribution
        const markerColor = getColorForCache(point.cacheName);

        // Create popup content with basic information
        let popupContent = `
          <div>
            <div style="font-weight: bold; margin-bottom: 5px;">${point.cacheName}</div>
            <div style="font-size: 12px; color: #666; margin-bottom: 8px;">Coordinates: ${lat.toFixed(6)}, ${lon.toFixed(6)}</div>
        `;

        if (trackables.length > 1) {
          popupContent += `<div style="font-weight: bold; margin-bottom: 8px; color: ${markerColor};">${trackables.length} Trackables at this Location</div>`;
        }

        // Add each trackable with simple formatting
        trackables.forEach((tb, i) => {
          popupContent += `
            <div style="margin-top: 8px; ${i > 0 ? 'border-top: 1px solid #eee; padding-top: 8px;' : ''}">
              <div style="font-weight: bold;">${i+1}. ${tb.trackableName}</div>
              ${tb.totalStops ? `<div style="font-size: 12px; color: #666;">Total stops: ${tb.totalStops}</div>` : ''}
              <div><a href="https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}" target="_blank" style="color: #007bff; text-decoration: none;">View trackable details</a></div>
            </div>
          `;
        });

        popupContent += '</div>';

        // Create a colored marker for this point
        const markerIcon = L.divIcon({
          className: '',
          html: `<div style="background-color: ${markerColor}; width: 24px; height: 24px; border-radius: 12px; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.4);"></div>`,
          iconSize: [28, 28],
          iconAnchor: [14, 14]
        });
        const marker = L.marker([lat, lon], { icon: markerIcon }).addTo(map);

        // Add a label for the marker
        const labelText = trackables.length === 1 ?
          point.cacheName + (trackables.length > 1 ? ` (${trackables.length})` : '') :
          `${point.cacheName} (${trackables.length})`;

        const label = L.tooltip({
          permanent: true,
          direction: 'top',
          className: 'trackable-marker-label',
          offset: [0, -12]
        })
        .setContent(labelText)
        .setLatLng([lat, lon]);

        label.addTo(map);

        // Bind popup to marker
        marker.bindPopup(popupContent);

        // Hide label when popup is open
        marker.on('popupopen', function() {
          map.removeLayer(label);
        });

        // Show label when popup is closed
        marker.on('popupclose', function() {
          label.addTo(map);
        });

        markers.push({
          marker,
          label,
          point
        });
      });

      // Find the legend container - should be a sibling of our map container
      const mapSection = container.closest('#gc-trackables-map-section');
      const legendContainer = mapSection ? mapSection.querySelector('#trackables-map-legend') : null;

      if (legendContainer) {
        // Get the content container
        const legendContent = document.getElementById('trackables-map-legend-content');
        if (!legendContent) return;

        // Clear any existing content
        legendContent.innerHTML = '';

        // Add entries for each marker/location
        markers.forEach((markerData, index) => {
          const { marker, point, label } = markerData;
          const trackables = point.trackables;
          const trackableCount = trackables.length;

          // For each location, create a section
          const sectionContainer = document.createElement('div');
          sectionContainer.style.marginBottom = index < markers.length - 1 ? '10px' : '0';
          sectionContainer.style.paddingBottom = index < markers.length - 1 ? '10px' : '0';
          sectionContainer.style.borderBottom = index < markers.length - 1 ? '1px solid #eee' : 'none';

          // Location header
          const locationHeader = document.createElement('div');
          locationHeader.style.display = 'flex';
          locationHeader.style.alignItems = 'center';
          locationHeader.style.marginBottom = '5px';
          locationHeader.style.cursor = 'pointer';

          // Create color dot to match marker color
          const colorDot = document.createElement('span');
          colorDot.style.width = '16px';
          colorDot.style.height = '16px';
          colorDot.style.borderRadius = '50%';
          colorDot.style.backgroundColor = getColorForCache(point.cacheName);
          colorDot.style.display = 'inline-block';
          colorDot.style.marginRight = '8px';
          colorDot.style.border = '1px solid rgba(0,0,0,0.2)';

          locationHeader.appendChild(colorDot);

          // Location text
          let locationText;
          locationText = document.createElement('div');

          if (trackables.length === 1) {
            locationText.textContent = trackables[0].cacheName;
          } else {
            locationText.textContent = `${point.cacheName} (${trackables.length} trackables)`;
          }

          locationText.style.fontWeight = 'bold';
          locationHeader.appendChild(locationText);

          // Add click event to zoom to marker
          locationHeader.addEventListener('click', () => {
            map.setView(marker.getLatLng(), 15);

            // Slight delay to ensure map has completed moving before opening popup
            setTimeout(() => {
              marker.openPopup();
            }, 300);
          });

          // Add hover effect
          locationHeader.addEventListener('mouseenter', () => {
            locationHeader.style.backgroundColor = '#f0f0f0';
          });

          locationHeader.addEventListener('mouseleave', () => {
            locationHeader.style.backgroundColor = '';
          });

          sectionContainer.appendChild(locationHeader);

          // Add individual trackable items if there are multiple at this location
          if (trackables.length > 1) {
            const trackablesList = document.createElement('div');
            trackablesList.style.marginLeft = '24px';

            trackables.forEach((tb, i) => {
              const trackableItem = document.createElement('div');
              trackableItem.style.padding = '3px 0';
              trackableItem.style.fontSize = '12px';
              trackableItem.style.display = 'flex';
              trackableItem.style.alignItems = 'center';
              trackableItem.style.cursor = 'pointer';

              const bulletPoint = document.createElement('span');
              bulletPoint.textContent = '•';
              bulletPoint.style.marginRight = '5px';
              trackableItem.appendChild(bulletPoint);

              const tbName = document.createElement('span');
              tbName.innerHTML = `<span style="font-weight: bold;">${tb.trackableName}</span>${tb.totalStops ? ` (${tb.totalStops} stops)` : ''}`;
              trackableItem.appendChild(tbName);

              // Add click handler to open trackable page
              trackableItem.addEventListener('click', () => {
                window.open(`https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}`, '_blank');
              });

              // Add hover effect
              trackableItem.addEventListener('mouseenter', () => {
                trackableItem.style.backgroundColor = '#f0f0f0';
                trackableItem.style.color = '#0066cc';
              });

              trackableItem.addEventListener('mouseleave', () => {
                trackableItem.style.backgroundColor = '';
                trackableItem.style.color = '';
              });

              trackablesList.appendChild(trackableItem);
            });

            sectionContainer.appendChild(trackablesList);
          } else if (trackables.length === 1) {
            // Make single trackable clickable too
            const tb = trackables[0];
            const trackableItem = document.createElement('div');
            trackableItem.style.marginLeft = '28px';
            trackableItem.style.fontSize = '12px';
            trackableItem.style.cursor = 'pointer';
            trackableItem.style.display = 'flex';
            trackableItem.style.alignItems = 'center';

            const bulletPoint = document.createElement('span');
            bulletPoint.textContent = '•';
            bulletPoint.style.marginRight = '5px';
            trackableItem.appendChild(bulletPoint);

            const tbName = document.createElement('span');
            tbName.innerHTML = `<span style="font-weight: bold;">${tb.trackableName}</span>${tb.totalStops ? ` (${tb.totalStops} stops)` : ''}`;
            trackableItem.appendChild(tbName);

            // Add click handler to open trackable page
            trackableItem.addEventListener('click', () => {
              window.open(`https://www.geocaching.com/track/details.aspx?id=${tb.trackableId}`, '_blank');
            });

            // Add hover effect
            trackableItem.addEventListener('mouseenter', () => {
              trackableItem.style.backgroundColor = '#f0f0f0';
              trackableItem.style.color = '#0066cc';
            });

            trackableItem.addEventListener('mouseleave', () => {
              trackableItem.style.backgroundColor = '';
              trackableItem.style.color = '';
            });

            sectionContainer.appendChild(trackableItem);
          }

          legendContent.appendChild(sectionContainer);
        });
      }
    }

    // Function to safely inject the map container into the page
    function safelyInjectMap() {
      // First, identify the main container and the search panel
      const pageWrapper = document.querySelector('#Content, #content, .Content');

      if (!pageWrapper) {
        console.error('Could not find main content wrapper');
        return null;
      }

      // Clear any existing map we might have added before
      const existingMap = document.getElementById('gc-trackables-map-section');
      if (existingMap) {
        existingMap.remove();
      }

      // Create our map container with a distinctive ID
      const mapSection = document.createElement('div');
      mapSection.id = 'gc-trackables-map-section';
      mapSection.style.width = '100%';
      mapSection.style.clear = 'both';
      mapSection.style.position = 'relative';
      mapSection.style.margin = '20px 0';
      mapSection.style.padding = '0';
      mapSection.style.backgroundColor = '#fff';
      mapSection.style.boxSizing = 'border-box';

      // Add title
      const mapTitle = document.createElement('h3');
      mapTitle.textContent = 'Trackable Locations Map';
      mapTitle.style.margin = '0 0 10px 0';
      mapTitle.style.padding = '0';
      mapTitle.style.fontSize = '16px';
      mapTitle.style.fontWeight = 'bold';
      mapSection.appendChild(mapTitle);

      // Create map container
      const mapContainer = document.createElement('div');
      mapContainer.id = 'trackables-map-container';
      mapContainer.style.width = '100%';
      mapContainer.style.height = '500px';
      mapContainer.style.border = '1px solid #ddd';
      mapContainer.style.borderRadius = '4px';
      mapContainer.style.marginBottom = '10px';
      mapContainer.style.boxSizing = 'border-box';
      mapSection.appendChild(mapContainer);

      // Create legend container that will be filled by the map creation function
      const legendContainer = document.createElement('div');
      legendContainer.id = 'trackables-map-legend';
      legendContainer.style.marginTop = '10px';
      legendContainer.style.width = '100%';
      legendContainer.style.boxSizing = 'border-box';
      legendContainer.style.border = '1px solid #eee';
      legendContainer.style.borderRadius = '4px';
      legendContainer.style.backgroundColor = '#fff';

      // Create collapsible header for legend
      const legendHeader = document.createElement('div');
      legendHeader.style.padding = '10px';
      legendHeader.style.borderBottom = '1px solid #eee';
      legendHeader.style.display = 'flex';
      legendHeader.style.alignItems = 'center';
      legendHeader.style.justifyContent = 'space-between';
      legendHeader.style.cursor = 'pointer';

      // Create title text
      const headerText = document.createElement('div');
      headerText.textContent = 'Trackables';
      headerText.style.fontWeight = 'bold';
      headerText.style.fontSize = '14px';

      // Create arrow indicator
      const arrowIndicator = document.createElement('div');
      arrowIndicator.innerHTML = '&#9650;'; // Up arrow (collapsed)
      arrowIndicator.style.transition = 'transform 0.3s';
      arrowIndicator.style.fontSize = '12px';

      // Append elements to header
      legendHeader.appendChild(headerText);
      legendHeader.appendChild(arrowIndicator);
      legendContainer.appendChild(legendHeader);

      // Create content container for the legend
      const legendContent = document.createElement('div');
      legendContent.id = 'trackables-map-legend-content';
      legendContent.style.padding = '10px';
      legendContent.style.display = 'none'; // Hidden by default
      legendContent.style.maxHeight = 'none';
      legendContent.style.overflowY = 'visible';
      legendContainer.appendChild(legendContent);

      // Add click event to toggle legend visibility
      legendHeader.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const isVisible = legendContent.style.display !== 'none';
        legendContent.style.display = isVisible ? 'none' : 'block';
        arrowIndicator.innerHTML = isVisible ? '&#9650;' : '&#9660;'; // Up arrow when closed, down arrow when open

        return false;
      });

      mapSection.appendChild(legendContainer);

      // Look for the best insertion point
      let inserted = false;

      // Method 1: Try to find common table containers
      const tableContainers = Array.from(document.querySelectorAll('.Table, table, .table-container'));
      for (const table of tableContainers) {
        // Only consider visible tables
        if (isElementVisible(table)) {
          const tableParent = table.parentNode;

          // Insert before the table
          tableParent.insertBefore(mapSection, table);
          inserted = true;
          break;
        }
      }

      // Method 2: If we couldn't find a table, try to find section headings
      if (!inserted) {
        const sectionHeadings = Array.from(document.querySelectorAll('h1, h2, h3'));
        for (const heading of sectionHeadings) {
          // Look for headings related to trackables or search
          const headingText = heading.textContent.toLowerCase();
          if ((headingText.includes('trackable') || headingText.includes('search')) && isElementVisible(heading)) {
            // Insert after the heading
            if (heading.nextSibling) {
              heading.parentNode.insertBefore(mapSection, heading.nextSibling);
            } else {
              heading.parentNode.appendChild(mapSection);
            }
            inserted = true;
            break;
          }
        }
      }

      // Method 3: Last resort - insert at top of content area
      if (!inserted) {
        // Insert at the beginning of the content area
        if (pageWrapper.firstChild) {
          pageWrapper.insertBefore(mapSection, pageWrapper.firstChild);
        } else {
          pageWrapper.appendChild(mapSection);
        }
      }

      // Initialize the empty map
      const mapViewContainer = document.createElement('div');
      mapViewContainer.id = 'leaflet-map';
      mapViewContainer.style.width = '100%';
      mapViewContainer.style.height = '500px';
      mapViewContainer.style.border = '1px solid #ddd';
      mapViewContainer.style.borderRadius = '4px';
      mapContainer.appendChild(mapViewContainer);

      // Initialize the map with a default view (world map)
      try {
        // Create a new map instance
        trackableMap = L.map('leaflet-map').setView([20, 0], 2);

        // Add OpenStreetMap tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          maxZoom: 18
        }).addTo(trackableMap);

        // Add "Loading trackables..." message
        const loadingMessage = L.control({position: 'bottomleft'});
        loadingMessage.onAdd = function(map) {
          const div = L.DomUtil.create('div', 'loading-message');
          div.innerHTML = '<div style="background-color: white; padding: 5px 10px; border-radius: 4px; border: 1px solid #ccc; font-weight: bold;">Loading trackable data...</div>';
          return div;
        };
        loadingMessage.addTo(trackableMap);
      } catch (e) {
        console.error('Error initializing map:', e);
      }

      // Add custom CSS for marker labels
      const style = document.createElement('style');
      style.textContent = `
        .trackable-marker-label {
          background: white;
          border: 1px solid #333;
          border-radius: 4px;
          padding: 2px 6px;
          font-weight: bold;
          white-space: nowrap;
          text-align: center;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          pointer-events: none;
        }
      `;
      document.head.appendChild(style);

      return mapContainer;
    }

    // Find trackables on the page and process them
    async function processTrackables() {
      // Prevent concurrent processing
      if (isProcessingTrackables) {
        console.log('Already processing trackables, skipping duplicate call');
        return;
      }

      isProcessingTrackables = true;

      try {
        // Create and inject map container first before processing data
        const mapContainer = safelyInjectMap();

        // Extract trackables
        const trackablesMap = extractTrackablesFromPage();
        console.log(`Found ${trackablesMap.size} trackables on page`);

        if (trackablesMap.size === 0) {
          console.log('No trackables found on page');
          // Update the map with a "No trackables" message
          if (trackableMap) {
            // Remove any loading message
            const loadingControl = document.querySelector('.loading-message');
            if (loadingControl && loadingControl.parentNode) {
              loadingControl.parentNode.removeChild(loadingControl);
            }

            const noDataMessage = L.control({position: 'bottomleft'});
            noDataMessage.onAdd = function(map) {
              const div = L.DomUtil.create('div', 'no-data-message');
              div.innerHTML = '<div style="background-color: white; padding: 5px 10px; border-radius: 4px; border: 1px solid #ccc;">No trackable location data available</div>';
              return div;
            };
            noDataMessage.addTo(trackableMap);
          }
          isProcessingTrackables = false;
          return;
        }

        const trackables = Array.from(trackablesMap.values());
        console.log('Trackables found:', trackables);

        // Enrich trackables with stop data
        const enrichedTrackables = await enrichTrackablesWithStops(trackables);

        // Display on map
        displayTrackablesMap(enrichedTrackables, mapContainer);
      } catch (error) {
        console.error('Error in processTrackables:', error);
      } finally {
        // Always reset the processing flag
        isProcessingTrackables = false;
      }
    }

    // Run on page load and after AJAX content updates
    setTimeout(processTrackables, 1000);

    // Track if the map has been added to the page
    let mapAdded = false;

    // Create a MutationObserver to watch for content changes
    const observer = new MutationObserver(function(mutations) {
      // Don't trigger if we're already processing or if we created the map element
      if (isProcessingTrackables || mapAdded) return;

      let shouldReprocess = false;

      // Check if any mutations affect our elements of interest (trackable links)
      for (const mutation of mutations) {
        // Skip mutations caused by our own map
        if (mutation.target.id === 'gc-trackables-map-section' ||
            mutation.target.closest('#gc-trackables-map-section')) {
          continue;
        }

        // Skip mutations that don't add nodes - we only care about content being added
        if (mutation.type !== 'childList' || mutation.addedNodes.length === 0) {
          continue;
        }

        // Look for relevant data tables or trackable links
        if (mutation.target.classList.contains('Table') ||
            mutation.target.querySelector('.Table') ||
            mutation.target.querySelector('a[href*="track/details.aspx"]')) {
          shouldReprocess = true;
          break;
        }
      }

      if (shouldReprocess) {
        console.log('Content changed, reprocessing trackables');
        processTrackables().finally(() => {
          mapAdded = true;

          // Disconnect observer after first successful map creation to prevent further updates
          // This prevents repeated refreshing while still allowing the initial map to be created
          observer.disconnect();
        });
      }
    });

    // Start observing with configuration
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
})();
长期地址
遇到问题？请前往 GitHub 提 Issues。