🌍 Environment
Los Angeles
72°F
Traffic
Moderate
San Francisco
68°F
Traffic
Light
// STATE
let map;
let heatLayer = null;
let markers = [];
let selectedGeneral = null;
// MAJOR CITIES
const majorCities = {
'Los Angeles': { lat: 34.0522, lng: -118.2437 },
'San Francisco': { lat: 37.7749, lng: -122.4194 },
'Sacramento': { lat: 38.5816, lng: -121.4944 },
'San Diego': { lat: 32.7157, lng: -117.1611 }
};
// MOCK DATA - Replace with your Havenstone API endpoint
const mockGenerals = [
{ general_id: 'GEN_001', general_name: 'LEONARDO_PYTHAGORAS', territory: 'Los Angeles', property_value: 2440000, tonguestone: 'F9FD08AAE55674D2', latitude: 34.0522, longitude: -118.2437, persona: 'Architect', crime_rate: 12, confidence: 95 },
{ general_id: 'GEN_002', general_name: 'EINSTEIN_CURIE', territory: 'San Francisco', property_value: 1950000, tonguestone: 'A7BC12CD34EF5678', latitude: 37.7749, longitude: -122.4194, persona: 'Scientist', crime_rate: 8, confidence: 92 },
{ general_id: 'GEN_003', general_name: 'NEWTON_DARWIN', territory: 'Los Angeles', property_value: 1800000, tonguestone: 'E5F8901AB2CD3456', latitude: 34.0500, longitude: -118.2450, persona: 'Philosopher', crime_rate: 14, confidence: 88 },
{ general_id: 'GEN_004', general_name: 'COMMANDER_MARKUS', territory: 'Sacramento', property_value: 850000, tonguestone: 'B9C0D1E2F3A4B5C6', latitude: 38.5816, longitude: -121.4944, persona: 'Military', crime_rate: 6, confidence: 90 },
{ general_id: 'GEN_005', general_name: 'LORD_NORTHERN_VALE', territory: 'San Diego', property_value: 1550000, tonguestone: 'C7D8E9F0A1B2C3D4', latitude: 32.7157, longitude: -117.1611, persona: 'Nobility', crime_rate: 10, confidence: 91 }
];
let allGenerals = mockGenerals;
// INIT
function initMap() {
map = L.map('map').setView([36.5, -119.5], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 19
}).addTo(map);
renderCascade();
renderHeatMap();
updateMarketData();
updateWeatherData();
}
// RENDER CASCADE
function renderCascade() {
const container = document.getElementById('cascadeContainer');
container.innerHTML = '';
Object.entries(majorCities).forEach(([cityName, coords]) => {
const cityGenerals = allGenerals.filter(g => g.territory === cityName);
const count = cityGenerals.length;
const box = document.createElement('div');
box.className = 'tier1-box';
box.innerHTML = `
`;
container.appendChild(box);
});
}
function toggleCityBox(header) {
const box = header.closest('.tier1-box');
const cityName = header.querySelector('.tier1-title').textContent;
box.classList.toggle('expanded');
if (box.classList.contains('expanded')) {
const cityGenerals = allGenerals.filter(g => g.territory === cityName);
populateTier2(cityName, cityGenerals);
}
}
function populateTier2(cityName, generals) {
const contentDiv = document.getElementById(`content-${cityName}`);
contentDiv.innerHTML = '';
if (generals.length === 0) {
const zeroItem = document.createElement('div');
zeroItem.style.cssText = 'padding: 8px 10px; color: #555; font-size: 9px;';
zeroItem.textContent = '0 available';
contentDiv.appendChild(zeroItem);
return;
}
generals.forEach(general => {
const item = document.createElement('div');
item.className = 'tier2-item' + (selectedGeneral?.general_id === general.general_id ? ' active' : '');
item.innerHTML = `
${general.general_name}
$${(general.property_value / 1000000).toFixed(1)}M
`;
item.onclick = () => selectGeneralFromCascade(general);
contentDiv.appendChild(item);
});
}
function selectGeneralFromCascade(general) {
selectedGeneral = general;
document.querySelectorAll('.tier2-item').forEach(el => el.classList.remove('active'));
event.currentTarget?.classList.add('active');
updateMapMarker(general);
showDetail(general);
}
function updateMapMarker(general) {
markers.forEach(m => map.removeLayer(m));
markers = [];
// TS-LOCKED MARKER with click handler
const marker = L.circleMarker([general.latitude, general.longitude], {
radius: 10,
fillColor: '#c8a84b',
color: '#fbbf24',
weight: 2,
opacity: 0.8,
fillOpacity: 0.6
}).addTo(map);
// Click marker to open detail
marker.on('click', () => {
selectedGeneral = general;
showDetail(general);
map.setView([general.latitude, general.longitude], 15);
});
marker.bindPopup(`
${general.general_name}
TS: ${general.tonguestone.substring(0, 8)}
$${(general.property_value / 1000000).toFixed(1)}M
`);
markers.push(marker);
map.setView([general.latitude, general.longitude], 13);
}
// HEAT MAP
function renderHeatMap() {
const heatData = allGenerals.map(g => [
g.latitude,
g.longitude,
(g.property_value / 2500000)
]);
if (heatLayer) map.removeLayer(heatLayer);
heatLayer = L.heatLayer(heatData, {
radius: 30,
blur: 20,
maxZoom: 1,
gradient: { 0.0: '#0066ff', 0.5: '#ffaa00', 1.0: '#ff4444' }
}).addTo(map);
}
function toggleHeatMap() {
if (map.hasLayer(heatLayer)) {
map.removeLayer(heatLayer);
document.querySelectorAll('.control-btn')[0].classList.remove('active');
} else {
heatLayer.addTo(map);
document.querySelectorAll('.control-btn')[0].classList.add('active');
}
}
function toggle3D() {
const btn = document.querySelectorAll('.control-btn')[1];
if (!map.hasLayer(heatLayer)) {
heatLayer.addTo(map);
document.querySelectorAll('.control-btn')[0].classList.add('active');
}
// Increase map zoom and intensity for 3D effect
map.setZoom(map.getZoom() + 1);
btn.classList.toggle('active');
if (btn.classList.contains('active')) {
alert('3D elevation visualization active - zoom in to see terrain variations');
}
}
function toggleStreetView() {
document.querySelectorAll('.control-btn')[2].classList.toggle('active');
}
// DETAIL
function showDetail(general) {
const overlay = document.getElementById('detailOverlay');
document.getElementById('detailTitle').textContent = general.general_name;
document.getElementById('detailTS').textContent = general.tonguestone.substring(0, 12);
const loanAmount = general.property_value * 0.8;
const monthlyRate = 0.0684 / 12;
const months = 360;
const monthlyPayment = loanAmount * (monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1);
document.getElementById('detailContent').innerHTML = `
General ID
${general.general_id}
Full Timestamp
${general.tonguestone}
Property Value
$${(general.property_value / 1000000).toFixed(1)}M
Monthly Payment
$${monthlyPayment.toFixed(0)}/mo @ 6.84%
Territory
${general.territory}
Coordinates (TS-Locked)
${general.latitude.toFixed(6)}, ${general.longitude.toFixed(6)}
Confidence
${general.confidence}%
`;
overlay.classList.remove('hidden');
overlay.classList.add('active');
document.getElementById('streetViewOverlay').classList.add('hidden');
document.getElementById('chatRoom').style.display = 'none';
}
function closeDetail() {
const overlay = document.getElementById('detailOverlay');
overlay.classList.add('hidden');
overlay.classList.remove('active');
document.getElementById('streetViewOverlay').classList.add('hidden');
}
// STREET VIEW
function expandToStreetView() {
if (!selectedGeneral) return;
const overlay = document.getElementById('streetViewOverlay');
const container = document.getElementById('streetViewContainer');
document.getElementById('streetViewTitle').textContent = selectedGeneral.general_name + ' - Street View';
// Clear previous streetview
container.innerHTML = '';
// Create street view with static snapshot
container.innerHTML = `
📍
${selectedGeneral.general_name}
Street View - ${selectedGeneral.territory}
Coordinates: ${selectedGeneral.latitude.toFixed(4)}, ${selectedGeneral.longitude.toFixed(4)}
Street View - Satellite Imagery
`;
overlay.classList.remove('hidden');
overlay.style.display = 'flex';
document.getElementById('detailOverlay').classList.add('hidden');
document.getElementById('chatRoom').style.display = 'none';
}
function closeStreetView() {
document.getElementById('streetViewOverlay').classList.add('hidden');
document.getElementById('streetViewOverlay').style.display = 'none';
document.getElementById('detailOverlay').classList.remove('hidden');
}
function expandToChat() {
if (!selectedGeneral) return;
document.getElementById('detailOverlay').classList.add('hidden');
document.getElementById('chatRoom').style.display = 'flex';
document.getElementById('chatRoom').style.zIndex = '200';
document.getElementById('streetViewOverlay').classList.add('hidden');
document.getElementById('detailTitle').textContent = selectedGeneral.general_name + ' Council Chat';
document.getElementById('chatTitle').textContent = selectedGeneral.general_name + ' Byzantine Council';
const chatMessages = document.getElementById('chatMessages');
if (chatMessages.children.length === 0) {
chatMessages.innerHTML = `✅ Connected to ${selectedGeneral.general_name}
TS: ${selectedGeneral.tonguestone.substring(0, 12)}
Ready for council discussion
`;
}
}
function closeChat() {
document.getElementById('chatRoom').style.display = 'none';
document.getElementById('detailOverlay').classList.remove('hidden');
document.getElementById('detailOverlay').classList.add('active');
}
function sendMessage() {
const input = document.getElementById('chatInput');
const msg = input.value.trim();
if (!msg) return;
const chatMessages = document.getElementById('chatMessages');
const msgEl = document.createElement('div');
msgEl.style.cssText = 'color: var(--primary-accent); font-size: 9px; padding: 6px; border-bottom: 1px solid var(--border-gold);';
msgEl.innerHTML = `You: ${msg}`;
chatMessages.appendChild(msgEl);
input.value = '';
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function scheduleAppointment() {
if (!selectedGeneral) return;
alert('Schedule appointment at ' + selectedGeneral.territory + ' (' + selectedGeneral.general_name + ')');
}
// SERVICE BOX FUNCTIONS
function toggleServiceBox(header, serviceName) {
const box = header.closest('.tier1-box');
box.classList.toggle('expanded');
}
function openServiceChat(serviceName, serviceId) {
document.getElementById('chatRoom').style.display = 'flex';
document.getElementById('chatRoom').style.zIndex = '200';
document.getElementById('chatTitle').textContent = '🔗 ' + serviceName + ' (Lane Router)';
document.getElementById('detailOverlay').classList.add('hidden');
const chatMessages = document.getElementById('chatMessages');
chatMessages.innerHTML = `
✅ Connected to ${serviceName}
Service ID: ${serviceId}
Routing through LANE_10 canonical memory
Ready for coordination
`;
}
// MARKET DATA
function updateMarketData() {
const mortgageVariance = (Math.random() - 0.5) * 0.02;
document.getElementById('mortgage30').textContent = (6.84 + mortgageVariance).toFixed(2) + '%';
document.getElementById('mortgage15').textContent = (6.12 + mortgageVariance).toFixed(2) + '%';
const spxValue = 1.24 + (Math.random() - 0.5) * 2;
const spxEl = document.getElementById('spx');
spxEl.textContent = (spxValue > 0 ? '+' : '') + spxValue.toFixed(2) + '%';
spxEl.className = 'market-value ' + (spxValue > 0 ? 'up' : 'down');
setTimeout(updateMarketData, 30000);
}
function updateWeatherData() {
const temps = [65 + Math.random() * 15, 65 + Math.random() * 15];
document.getElementById('weatherTemp').textContent = Math.floor(temps[0]) + '°F';
document.getElementById('weatherSF').textContent = Math.floor(temps[1]) + '°F';
}
// INITIALIZE
window.addEventListener('load', initMap);