triangle-area-map-4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triangle Area Locations</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        #map { height: 100vh; width: 100%; }
        .map-overlay {
            position: absolute;
            background: rgba(255,255,255,0.95);
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            z-index: 1000;
            font-size: 12px;
            max-width: 280px;
        }
        .legend {
            bottom: 24px;
            left: 12px;
        }
        .legend h3 { margin-bottom: 8px; font-size: 13px; color: #333; }
        .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .legend-item:last-child { margin-bottom: 0; }
        .legend-marker {
            width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
            border: 2px solid white; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .distance-panel {
            top: 12px;
            right: 12px;
        }
        .distance-panel h3 { margin-bottom: 8px; font-size: 13px; }
        table { border-collapse: collapse; font-size: 11px; }
        th, td { padding: 4px 6px; text-align: center; border: 1px solid #ddd; }
        th { background: #f5f5f5; font-weight: 600; }
        .highlight { background: #e8f5e9; }
        .info-bar {
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            padding: 8px 16px;
        }
        .leaflet-div-icon {
            background: transparent !important;
            border: none !important;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    
    <div class="map-overlay info-bar">
        <strong>Triangle Area Locations</strong> — Click markers for details
    </div>
    
    <div class="map-overlay legend">
        <h3>Locations</h3>
        <div class="legend-item">
            <div class="legend-marker" style="background: #e74c3c;"></div>
            <span><strong>Ronnie</strong> — Garner</span>
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: #3498db;"></div>
            <span><strong>Other Ronnie</strong> — Holly Springs</span>
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: #2ecc71;"></div>
            <span><strong>Benny</strong> — Willow Springs</span>
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: #9b59b6;"></div>
            <span><strong>Kim &amp; Jackie</strong> — Clayton</span>
        </div>
        <div class="legend-item">
            <div class="legend-marker" style="background: #95a5a6;"></div>
            <span>Downtown Raleigh (ref)</span>
        </div>
    </div>
    
    <div class="map-overlay distance-panel">
        <h3>Distances</h3>
        <table>
            <tr>
                <th></th>
                <th>R</th>
                <th>OR</th>
                <th>B</th>
                <th>K&amp;J</th>
            </tr>
            <tr>
                <th>Ronnie</th>
                <td>—</td>
                <td>12</td>
                <td>10</td>
                <td class="highlight">8</td>
            </tr>
            <tr>
                <th>Other R</th>
                <td>12</td>
                <td>—</td>
                <td class="highlight">8</td>
                <td>18</td>
            </tr>
            <tr>
                <th>Benny</th>
                <td>10</td>
                <td class="highlight">8</td>
                <td>—</td>
                <td>12</td>
            </tr>
            <tr>
                <th>K&amp;J</th>
                <td class="highlight">8</td>
                <td>18</td>
                <td>12</td>
                <td>—</td>
            </tr>
        </table>
        <div style="font-size: 10px; color: #666; margin-top: 6px;">distances in miles</div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const locations = [
            { name: "101 Carpe Diem Ln, Garner", lat: 35.6850, lng: -78.6150, color: "#e74c3c", desc: "<strong>Ronnie</strong><br>Garner (27603), south Wake County - new construction", label: "Ronnie" },
            { name: "Holly Springs", lat: 35.6512, lng: -78.8336, color: "#3498db", desc: "<strong>Other Ronnie</strong><br>Southwest Wake County suburb", label: "Other Ronnie" },
            { name: "Eagle Chase Dr, Willow Springs", lat: 35.5500, lng: -78.6700, color: "#2ecc71", desc: "<strong>Benny</strong><br>Southern Wake County, rural", label: "Benny" },
            { name: "Riverwood, Clayton", lat: 35.6200, lng: -78.4564, color: "#9b59b6", desc: "<strong>Kim &amp; Jackie</strong><br>Southeast, Johnston County", label: "Kim & Jackie" },
            { name: "Downtown Raleigh", lat: 35.7796, lng: -78.6382, color: "#95a5a6", desc: "Reference point" }
        ];

        const map = L.map('map').setView([35.72, -78.65], 10);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Add markers
        locations.forEach(loc => {
            const marker = L.circleMarker([loc.lat, loc.lng], {
                radius: loc.name === "Downtown Raleigh" ? 6 : 12,
                fillColor: loc.color,
                color: "#fff",
                weight: 2,
                opacity: 1,
                fillOpacity: 0.9
            }).addTo(map);
            
            marker.bindPopup(`<strong>${loc.name}</strong><br>${loc.desc}`);
            
            // Add name label if it has one
            if (loc.label) {
                const label = L.divIcon({
                    className: '',
                    html: `<div style="background: rgba(255,255,255,0.95); color: #333; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3); border-left: 4px solid ${loc.color}; display: inline-block;">${loc.label}</div>`,
                    iconSize: null,
                    iconAnchor: [-12, 10]
                });
                L.marker([loc.lat, loc.lng], { icon: label }).addTo(map);
            }
        });

        // Draw lines between southern cluster
        const southernCluster = locations.filter(l => l.name !== "Carpe Diem Lane, Raleigh" && l.name !== "Downtown Raleigh");
        
        // Holly Springs to Willow Springs (closest pair)
        L.polyline([
            [locations[1].lat, locations[1].lng],
            [locations[2].lat, locations[2].lng]
        ], { color: '#27ae60', weight: 2, opacity: 0.5, dashArray: '8, 6' }).addTo(map);

        // Willow Springs to Clayton
        L.polyline([
            [locations[2].lat, locations[2].lng],
            [locations[3].lat, locations[3].lng]
        ], { color: '#8e44ad', weight: 2, opacity: 0.4, dashArray: '6, 8' }).addTo(map);

        // Holly Springs to Clayton
        L.polyline([
            [locations[1].lat, locations[1].lng],
            [locations[3].lat, locations[3].lng]
        ], { color: '#3498db', weight: 2, opacity: 0.3, dashArray: '6, 8' }).addTo(map);

        // Garner to Clayton (closest pair now)
        L.polyline([
            [locations[0].lat, locations[0].lng],
            [locations[3].lat, locations[3].lng]
        ], { color: '#e74c3c', weight: 2, opacity: 0.5, dashArray: '8, 6' }).addTo(map);

        // Garner to Willow Springs
        L.polyline([
            [locations[0].lat, locations[0].lng],
            [locations[2].lat, locations[2].lng]
        ], { color: '#e67e22', weight: 2, opacity: 0.4, dashArray: '6, 8' }).addTo(map);

        // Fit bounds to show all markers with padding for overlays
        const bounds = L.latLngBounds(locations.map(l => [l.lat, l.lng]));
        map.fitBounds(bounds, { padding: [60, 60] });
    </script>
</body>
</html>