Yandrik/budapest-sites-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

INITIAL COMMIT

Browse Source
This commit is contained in:
yandrik
2025-10-23 17:24:38 +02:00
commit 67ce215fd4
4 changed files with 2445 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

619
app.js Normal file
View File

@ -0,0 +1,619 @@
// Budapest Sights Data
const sightsData = [
{ id: 1, name: "Hungarian Parliament Building", category: "Historic Landmark", description: "One of Europe's most stunning government buildings, located right on the Danube. Features neo-Gothic architecture with over 40 kg of gold, 691 rooms, and 96m height commemorating Hungary's founding year 896.", latitude: 47.5076, longitude: 19.0458, admission: "From €30, guided tours available in English", hours: "Various tour times, advance booking recommended", visit_duration: "60-90 minutes" },
{ id: 2, name: "Fisherman's Bastion", category: "Historic Landmark", description: "Fairytale-like neo-Romanesque terrace with seven towers representing the seven Magyar tribes. Offers iconic views of Parliament and the Danube. Lower terrace free 24/7, upper ramparts require ticket.", latitude: 47.5023, longitude: 19.0350, admission: "Lower terrace free, upper ramparts 1,500 HUF (€4)", hours: "Lower 24/7, Upper 9:00-21:00 (summer), 9:00-19:00 (rest of year)", visit_duration: "45-60 minutes" },
{ id: 3, name: "Buda Castle", category: "Historic Landmark", description: "UNESCO World Heritage Site, once home to Hungarian kings. Now houses the Hungarian National Gallery and Budapest History Museum. Beautiful courtyards and terraces with stunning views of Pest.", latitude: 47.4967, longitude: 19.0397, admission: "Grounds free, museums require separate tickets", hours: "Grounds 24/7, museums vary", visit_duration: "90-120 minutes" },
{ id: 4, name: "Matthias Church", category: "Religious Site", description: "Stunning Gothic church with colorful Zsolnay tiled roof, originally built in 1015. Hosted royal coronations and has excellent acoustics for classical concerts.", latitude: 47.5019, longitude: 19.0348, admission: "3,100 HUF (€8) adults, bell tower extra 3,700 HUF", hours: "Mon-Sat 9:00-17:45, Sun 13:00-17:45", visit_duration: "45-60 minutes" },
{ id: 5, name: "Chain Bridge (Széchenyi Lánchíd)", category: "Historic Landmark", description: "Budapest's oldest permanent bridge (1849), first to connect Buda and Pest. Iconic symbol with stone lions, suspension chains, beautiful when illuminated at night.", latitude: 47.4983, longitude: 19.0436, admission: "Free", hours: "24/7", visit_duration: "20-30 minutes" },
{ id: 6, name: "St. Stephen's Basilica", category: "Religious Site", description: "Neoclassical church named after Hungary's first king, whose mummified right hand is preserved here. 96m height (same as Parliament). Panoramic dome with 360° views.", latitude: 47.5009, longitude: 19.0534, admission: "6,000 HUF (€15) including dome, 20% discount with Budapest Card", hours: "Mon-Sat 9:00-17:45, Sun 13:00-17:45", visit_duration: "60-90 minutes" },
{ id: 7, name: "Heroes' Square", category: "Monument", description: "Iconic square featuring the Millennium Monument with Archangel Gabriel atop central column, surrounded by statues of Hungary's national leaders. Flanked by Museum of Fine Arts and Műcsarnok.", latitude: 47.5146, longitude: 19.0777, admission: "Free", hours: "24/7", visit_duration: "30-45 minutes" },
{ id: 8, name: "Széchenyi Thermal Baths", category: "Thermal Bath", description: "Europe's largest medicinal bath complex with 18 pools (3 outdoor). Neo-baroque architecture, waters from 1,246m deep well. Famous for chess players in outdoor pools, even in winter.", latitude: 47.5196, longitude: 19.0815, admission: "From 8,600 HUF (€22) weekdays, 9,200 HUF (€23) weekends", hours: "6:00-22:00 daily", visit_duration: "2-4 hours" },
{ id: 9, name: "Gellért Thermal Baths", category: "Thermal Bath", description: "Stunning Art Nouveau baths (1912-1918) at foot of Gellért Hill. Famous for blue Zsolnay tiles, marble columns, stained-glass ceilings. 10 pools with wave pool in summer.", latitude: 47.4826, longitude: 19.0523, admission: "From 17,700 HUF (€45)", hours: "9:00-19:00 daily", visit_duration: "2-3 hours" },
{ id: 10, name: "Gellért Hill & Citadel", category: "Viewpoint", description: "235m high hill with panoramic city views. Features Citadel fortress (1851) and Liberty Statue. Easy hike with stunning vistas, especially at sunset.", latitude: 47.4867, longitude: 19.0463, admission: "Free", hours: "24/7", visit_duration: "60-90 minutes" },
{ id: 11, name: "Great Market Hall (Central Market)", category: "Market", description: "Largest and oldest indoor market (1897) with neo-Gothic design and Zsolnay tile roof. Three floors with fresh produce, local foods, souvenirs, and traditional Hungarian street food on upper level.", latitude: 47.4870, longitude: 19.0583, admission: "Free entry", hours: "Mon 6:00-17:00, Tue-Fri 6:00-18:00, Sat 6:00-15:00, Sun closed", visit_duration: "60-90 minutes" },
{ id: 12, name: "Shoes on the Danube Bank", category: "Memorial", description: "Poignant Holocaust memorial with 60 pairs of iron shoes honoring 3,500 Jews shot into the Danube by Arrow Cross militia (1944-45). Located 300m south of Parliament.", latitude: 47.5050, longitude: 19.0451, admission: "Free", hours: "24/7", visit_duration: "15-30 minutes" },
{ id: 13, name: "Dohány Street Synagogue", category: "Religious Site", description: "Europe's largest synagogue (1859) in Moorish Revival style, seats 3,000. Complex includes Heroes' Temple, Jewish Museum, memorial garden. Located at former ghetto border.", latitude: 47.4959, longitude: 19.0618, admission: "Tickets required, guided tours available", hours: "Weekdays only, closed Saturdays and Jewish holidays", visit_duration: "60-90 minutes" },
{ id: 14, name: "Hungarian State Opera House", category: "Cultural Venue", description: "Neo-Renaissance masterpiece (1884) by Miklós Ybl on Andrássy Avenue. Interior decorated with 7kg of gold. Offers ballet and opera performances, guided tours available.", latitude: 47.5027, longitude: 19.0586, admission: "Tours and performances vary", hours: "Tour times vary, performances evenings", visit_duration: "45-60 minutes (tour) or 2-3 hours (performance)" },
{ id: 15, name: "Szimpla Kert", category: "Ruin Bar", description: "Original and most famous ruin bar (2002) in abandoned building. Eclectic decor with vintage items, multiple rooms, outdoor courtyard. Sunday farmers market. Free concerts.", latitude: 47.4968, longitude: 19.0631, admission: "Free entry, pay for drinks", hours: "Daily 12:00-late, Sunday market 9:00-14:00", visit_duration: "90-120 minutes" },
{ id: 16, name: "Vajdahunyad Castle", category: "Historic Landmark", description: "Eclectic castle in City Park blending Romanesque, Gothic, Renaissance, and Baroque styles. Originally built for 1896 Millennium Exhibition, rebuilt in stone due to popularity.", latitude: 47.5148, longitude: 19.0826, admission: "Grounds free, museum inside requires ticket", hours: "Grounds 24/7, museum varies", visit_duration: "45-60 minutes" },
{ id: 17, name: "Andrássy Avenue", category: "Street/District", description: "Budapest's most elegant boulevard, UNESCO World Heritage Site. Lined with neo-Renaissance townhouses, luxury shops, cafes. Connects city center to Heroes' Square.", latitude: 47.5035, longitude: 19.0640, admission: "Free", hours: "24/7", visit_duration: "60-90 minutes (walking)" },
{ id: 18, name: "Elizabeth Lookout Tower", category: "Viewpoint", description: "Fairytale stone tower on János Hill offering 360° panoramic views of Budapest and surrounding hills. On clear days, can spot Mátra mountains.", latitude: 47.5180, longitude: 18.9570, admission: "Small fee", hours: "Varies by season", visit_duration: "45-60 minutes" },
{ id: 19, name: "Váci Street", category: "Shopping Street", description: "Famous pedestrian shopping street running through city center. Filled with shops, restaurants, cafes. Connects to Great Market Hall at southern end.", latitude: 47.4950, longitude: 19.0525, admission: "Free", hours: "24/7 (shops vary)", visit_duration: "60-90 minutes" },
{ id: 20, name: "City Park (Városliget)", category: "Park", description: "Large public park with lake, Vajdahunyad Castle, Széchenyi Baths, Heroes' Square. Popular for walking, boating in summer, ice skating in winter.", latitude: 47.5157, longitude: 19.0833, admission: "Free", hours: "24/7", visit_duration: "90-120 minutes" }
];
// App state
let map;
let markers = [];
let selectedSights = new Set();
let hotelMarker = null;
let routePolyline = null;
let hotelLocation = null;
let isPlacingHotel = false;
// Constants
const WALKING_SPEED_KMH = 5.0;
const WALKING_SPEED_MPH = 3.1;
const STREET_FACTOR = 1.3;
const BUDAPEST_CENTER = [47.4979, 19.0402];
// Category colors for markers
const categoryColors = {
"Historic Landmark": "#dc2626",
"Religious Site": "#fbbf24",
"Thermal Bath": "#1e40af",
"Viewpoint": "#059669",
"Cultural Venue": "#7c3aed",
"Market": "#ea580c",
"Memorial": "#6b7280",
"Ruin Bar": "#0891b2",
"Street/District": "#0891b2",
"Shopping Street": "#0891b2",
"Park": "#059669",
"Monument": "#6b7280"
};
// Category icons
const categoryIcons = {
"Historic Landmark": "🏛️",
"Religious Site": "⛪",
"Thermal Bath": "🛁",
"Viewpoint": "🏔️",
"Cultural Venue": "🎭",
"Market": "🏪",
"Memorial": "🕊️",
"Ruin Bar": "🍺",
"Street/District": "🛣️",
"Shopping Street": "🛍️",
"Park": "🌳",
"Monument": "🗿"
};
// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
initializeMap();
renderSightsList();
setupEventListeners();
showInstructions();
});
// Initialize Leaflet map
function initializeMap() {
map = L.map('map').setView(BUDAPEST_CENTER, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
// Add all sight markers
sightsData.forEach((sight, index) => {
addSightMarker(sight, index + 1);
});
// Handle map clicks for hotel placement
map.on('click', handleMapClick);
}
// Add sight marker to map
function addSightMarker(sight, number) {
const category = sight.category;
const color = categoryColors[category] || categoryColors["other"];
const icon = categoryIcons[category] || "📍";
const customIcon = L.divIcon({
html: `<div class="custom-marker" style="background-color: ${color}; color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">${number}</div>`,
className: 'custom-div-icon',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
const marker = L.marker([sight.latitude, sight.longitude], { icon: customIcon })
.bindPopup(createPopupContent(sight))
.addTo(map);
marker.sightData = sight;
markers.push(marker);
}
// Create popup content for markers
function createPopupContent(sight) {
const icon = categoryIcons[sight.category] || "📍";
return `
<div class="popup-content">
<h4>${icon} ${sight.name}</h4>
<p><strong>Category:</strong> ${sight.category}</p>
<p><strong>Admission:</strong> ${sight.admission}</p>
<p><strong>Hours:</strong> ${sight.hours}</p>
<p><strong>Duration:</strong> ${sight.visit_duration}</p>
<button onclick="openSightModal(${sight.id})" class="btn btn--primary btn--sm">More Details</button>
</div>
`;
}
// Handle map clicks for hotel placement
function handleMapClick(e) {
if (isPlacingHotel) {
placeHotel(e.latlng);
isPlacingHotel = false;
document.getElementById('placeHotelBtn').textContent = '📍 Place My Hotel';
document.body.style.cursor = 'default';
}
}
// Place hotel marker
function placeHotel(latlng) {
// Remove existing hotel marker
if (hotelMarker) {
map.removeLayer(hotelMarker);
}
const hotelIcon = L.divIcon({
html: `<div class="custom-marker" style="background-color: #ec4899; color: white; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">🏨</div>`,
className: 'custom-div-icon',
iconSize: [35, 35],
iconAnchor: [17.5, 17.5],
popupAnchor: [0, -17.5]
});
hotelMarker = L.marker(latlng, { icon: hotelIcon })
.bindPopup('<div><h4>🏨 Your Hotel</h4><p>Starting point for your route</p></div>')
.addTo(map);
hotelLocation = latlng;
// Show hotel info
document.getElementById('hotelInfo').classList.remove('hidden');
// Recalculate route if sights are selected
if (selectedSights.size > 0) {
updateRouteDisplay();
}
}
// Remove hotel marker
function removeHotel() {
if (hotelMarker) {
map.removeLayer(hotelMarker);
hotelMarker = null;
hotelLocation = null;
document.getElementById('hotelInfo').classList.add('hidden');
updateRouteDisplay();
}
}
// Render sights list in sidebar
function renderSightsList(filter = 'all', searchTerm = '') {
const sightsList = document.getElementById('sightsList');
sightsList.innerHTML = '';
const filteredSights = sightsData.filter(sight => {
const matchesFilter = filter === 'all' ||
sight.category === filter ||
(filter === 'other' && !Object.keys(categoryColors).includes(sight.category));
const matchesSearch = sight.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
sight.description.toLowerCase().includes(searchTerm.toLowerCase());
return matchesFilter && matchesSearch;
});
filteredSights.forEach(sight => {
const sightElement = document.createElement('div');
sightElement.className = 'sight-item';
sightElement.innerHTML = createSightItemHTML(sight);
sightElement.addEventListener('click', (e) => {
if (e.target.type !== 'checkbox') {
openSightModal(sight.id);
}
});
sightsList.appendChild(sightElement);
});
}
// Create sight item HTML
function createSightItemHTML(sight) {
const icon = categoryIcons[sight.category] || "📍";
const isSelected = selectedSights.has(sight.id);
return `
<div class="sight-item-header">
<div>
<div class="sight-item-title">${icon} ${sight.name}</div>
<div class="sight-category">${sight.category}</div>
</div>
<input type="checkbox" class="sight-checkbox"
${isSelected ? 'checked' : ''}
onchange="toggleSightSelection(${sight.id})">
</div>
<div class="sight-description">${sight.description.substring(0, 120)}...</div>
<div class="sight-details">
<strong>Duration:</strong> ${sight.visit_duration} •
<strong>Admission:</strong> ${sight.admission}
</div>
`;
}
// Toggle sight selection for route planning
function toggleSightSelection(sightId) {
if (selectedSights.has(sightId)) {
selectedSights.delete(sightId);
} else {
selectedSights.add(sightId);
}
updateRouteDisplay();
renderSightsList(getCurrentFilter(), getCurrentSearch());
}
// Update route display
function updateRouteDisplay() {
const routeStats = document.getElementById('routeStats');
const selectedSightsContainer = document.getElementById('selectedSights');
const downloadBtn = document.getElementById('downloadRouteBtn');
if (selectedSights.size === 0) {
routeStats.classList.add('hidden');
selectedSightsContainer.innerHTML = '';
downloadBtn.classList.add('hidden');
// Remove route polyline
if (routePolyline) {
map.removeLayer(routePolyline);
routePolyline = null;
}
return;
}
// Show stats
routeStats.classList.remove('hidden');
downloadBtn.classList.remove('hidden');
// Get selected sight objects
const selectedSightObjects = Array.from(selectedSights).map(id =>
sightsData.find(sight => sight.id === id)
);
// Calculate route
const route = calculateOptimalRoute(selectedSightObjects);
const { totalDistance, totalTime } = calculateRouteStats(route);
// Update stats display
document.getElementById('totalDistance').textContent =
`${totalDistance.toFixed(1)} km (${(totalDistance * 0.621371).toFixed(1)} mi)`;
document.getElementById('totalTime').textContent =
`${Math.round(totalTime)} minutes`;
document.getElementById('selectedCount').textContent =
`${selectedSights.size} sight${selectedSights.size !== 1 ? 's' : ''}`;
// Render selected sights with distances
renderSelectedSights(route);
// Draw route on map
drawRouteOnMap(route);
}
// Calculate optimal route
function calculateOptimalRoute(sights) {
if (sights.length === 0) return [];
if (sights.length === 1) return sights;
let startPoint = hotelLocation ?
{ latitude: hotelLocation.lat, longitude: hotelLocation.lng } :
sights[0];
const route = [];
const remaining = [...sights];
let current = startPoint;
// If we have a hotel, start from there
if (hotelLocation) {
route.push({ isHotel: true, ...current });
}
// Greedy algorithm: always go to nearest unvisited sight
while (remaining.length > 0) {
let nearestIndex = 0;
let minDistance = calculateDistance(
current.latitude, current.longitude,
remaining[0].latitude, remaining[0].longitude
);
for (let i = 1; i < remaining.length; i++) {
const distance = calculateDistance(
current.latitude, current.longitude,
remaining[i].latitude, remaining[i].longitude
);
if (distance < minDistance) {
minDistance = distance;
nearestIndex = i;
}
}
const nextSight = remaining.splice(nearestIndex, 1)[0];
route.push(nextSight);
current = nextSight;
}
return route;
}
// Calculate route statistics
function calculateRouteStats(route) {
if (route.length <= 1) return { totalDistance: 0, totalTime: 0 };
let totalDistance = 0;
for (let i = 0; i < route.length - 1; i++) {
const current = route[i];
const next = route[i + 1];
const distance = calculateDistance(
current.latitude, current.longitude,
next.latitude, next.longitude
) * STREET_FACTOR;
totalDistance += distance;
}
const totalTime = (totalDistance / WALKING_SPEED_KMH) * 60;
return { totalDistance, totalTime };
}
// Calculate distance between two points using Haversine formula
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // Earth's radius in km
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
// Render selected sights in route order
function renderSelectedSights(route) {
const container = document.getElementById('selectedSights');
container.innerHTML = '';
const sightsOnly = route.filter(item => !item.isHotel);
sightsOnly.forEach((sight, index) => {
const nextSight = sightsOnly[index + 1];
const prevSight = index === 0 ?
(hotelLocation ? { latitude: hotelLocation.lat, longitude: hotelLocation.lng } : sight) :
sightsOnly[index - 1];
const distance = calculateDistance(
prevSight.latitude, prevSight.longitude,
sight.latitude, sight.longitude
) * STREET_FACTOR;
const element = document.createElement('div');
element.className = 'selected-sight';
element.innerHTML = `
<div class="sight-order">${index + 1}</div>
<div class="selected-sight-info">
<div class="selected-sight-name">${sight.name}</div>
<div class="selected-sight-distance">
${index === 0 && hotelLocation ? 'From hotel: ' : 'From previous: '}
${distance.toFixed(1)} km (${(distance * 0.621371).toFixed(1)} mi)
</div>
</div>
`;
element.addEventListener('click', () => {
map.setView([sight.latitude, sight.longitude], 16);
});
container.appendChild(element);
});
}
// Draw route on map
function drawRouteOnMap(route) {
// Remove existing route
if (routePolyline) {
map.removeLayer(routePolyline);
}
if (route.length < 2) return;
const routeCoords = route.map(point => [point.latitude, point.longitude]);
routePolyline = L.polyline(routeCoords, {
color: '#2563eb',
weight: 3,
opacity: 0.8,
dashArray: '10, 5'
}).addTo(map);
// Fit map to show all points
const group = new L.featureGroup(markers.concat(routePolyline));
if (hotelMarker) {
group.addLayer(hotelMarker);
}
map.fitBounds(group.getBounds().pad(0.1));
}
// Open sight detail modal
function openSightModal(sightId) {
const sight = sightsData.find(s => s.id === sightId);
if (!sight) return;
const modal = document.getElementById('sightModal');
const title = document.getElementById('modalTitle');
const content = document.getElementById('modalContent');
const checkbox = document.getElementById('modalAddToRoute');
const icon = categoryIcons[sight.category] || "📍";
title.textContent = `${icon} ${sight.name}`;
checkbox.checked = selectedSights.has(sight.id);
checkbox.onchange = () => toggleSightSelection(sight.id);
content.innerHTML = `
<div style="margin-bottom: 16px;">
<strong>Category:</strong> ${sight.category}
</div>
<div style="margin-bottom: 16px;">
<p>${sight.description}</p>
</div>
<div style="margin-bottom: 12px;">
<strong>💰 Admission:</strong> ${sight.admission}
</div>
<div style="margin-bottom: 12px;">
<strong>🕒 Hours:</strong> ${sight.hours}
</div>
<div style="margin-bottom: 12px;">
<strong>⏱️ Recommended Duration:</strong> ${sight.visit_duration}
</div>
`;
modal.classList.remove('hidden');
// Set up zoom button
document.getElementById('zoomToSight').onclick = () => {
map.setView([sight.latitude, sight.longitude], 16);
modal.classList.add('hidden');
};
}
// Setup event listeners
function setupEventListeners() {
// Search
document.getElementById('searchInput').addEventListener('input', (e) => {
renderSightsList(getCurrentFilter(), e.target.value);
});
// Filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
renderSightsList(e.target.dataset.category, getCurrentSearch());
});
});
// Hotel placement
document.getElementById('placeHotelBtn').addEventListener('click', () => {
isPlacingHotel = true;
document.getElementById('placeHotelBtn').textContent = '📍 Click on map to place hotel';
document.body.style.cursor = 'crosshair';
});
document.getElementById('removeHotelBtn').addEventListener('click', removeHotel);
// Route controls
document.getElementById('optimizeRouteBtn').addEventListener('click', updateRouteDisplay);
document.getElementById('clearRouteBtn').addEventListener('click', clearRoute);
document.getElementById('downloadRouteBtn').addEventListener('click', downloadRoute);
// Modal controls
document.getElementById('closeModal').addEventListener('click', () => {
document.getElementById('sightModal').classList.add('hidden');
});
document.getElementById('closeInstructions').addEventListener('click', () => {
document.getElementById('mapInstructions').classList.add('hidden');
});
// Click outside modal to close
document.getElementById('sightModal').addEventListener('click', (e) => {
if (e.target.id === 'sightModal') {
document.getElementById('sightModal').classList.add('hidden');
}
});
}
// Clear route
function clearRoute() {
selectedSights.clear();
updateRouteDisplay();
renderSightsList(getCurrentFilter(), getCurrentSearch());
}
// Download route as text file
function downloadRoute() {
if (selectedSights.size === 0) return;
const selectedSightObjects = Array.from(selectedSights).map(id =>
sightsData.find(sight => sight.id === id)
);
const route = calculateOptimalRoute(selectedSightObjects);
const { totalDistance, totalTime } = calculateRouteStats(route);
let content = "BUDAPEST TRAVEL ROUTE\n";
content += "Generated by Budapest Travel Guide\n";
content += "=================================\n\n";
if (hotelLocation) {
content += "Starting Point: Your Hotel\n";
content += `Location: ${hotelLocation.lat.toFixed(6)}, ${hotelLocation.lng.toFixed(6)}\n\n`;
}
content += `Total Distance: ${totalDistance.toFixed(1)} km (${(totalDistance * 0.621371).toFixed(1)} mi)\n`;
content += `Estimated Walking Time: ${Math.round(totalTime)} minutes\n`;
content += `Number of Sights: ${selectedSights.size}\n\n`;
const sightsOnly = route.filter(item => !item.isHotel);
sightsOnly.forEach((sight, index) => {
content += `${index + 1}. ${sight.name}\n`;
content += ` Category: ${sight.category}\n`;
content += ` Duration: ${sight.visit_duration}\n`;
content += ` Admission: ${sight.admission}\n`;
content += ` Hours: ${sight.hours}\n`;
content += ` Location: ${sight.latitude.toFixed(6)}, ${sight.longitude.toFixed(6)}\n`;
if (index < sightsOnly.length - 1) {
const nextSight = sightsOnly[index + 1];
const distance = calculateDistance(
sight.latitude, sight.longitude,
nextSight.latitude, nextSight.longitude
) * STREET_FACTOR;
content += ` → Next: ${distance.toFixed(1)} km (${Math.round((distance / WALKING_SPEED_KMH) * 60)} min walk)\n`;
}
content += "\n";
});
content += "\nTips:\n";
content += "• Budapest city center is very walkable\n";
content += "• Buda side has hills - budget extra time\n";
content += "• Public transport available for longer distances\n";
content += "• Distances are estimated walking routes\n";
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'budapest-route.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Helper functions
function getCurrentFilter() {
return document.querySelector('.filter-btn.active')?.dataset.category || 'all';
}
function getCurrentSearch() {
return document.getElementById('searchInput').value;
}
function showInstructions() {
// Hide instructions after 5 seconds
setTimeout(() => {
document.getElementById('mapInstructions').classList.add('hidden');
}, 5000);
}
// Make functions available globally for HTML onclick handlers
window.toggleSightSelection = toggleSightSelection;
window.openSightModal = openSightModal;

222
budapest_sights_data.json Normal file
View File

@ -0,0 +1,222 @@
[
{
"id": 1,
"name": "Hungarian Parliament Building",
"category": "Historic Landmark",
"description": "One of Europe's most stunning government buildings, located right on the Danube. Features neo-Gothic architecture with over 40 kg of gold, 691 rooms, and 96m height commemorating Hungary's founding year 896.",
"latitude": 47.5076,
"longitude": 19.0458,
"admission": "From €30, guided tours available in English",
"hours": "Various tour times, advance booking recommended",
"visit_duration": "60-90 minutes"
},
{
"id": 2,
"name": "Fisherman's Bastion",
"category": "Historic Landmark",
"description": "Fairytale-like neo-Romanesque terrace with seven towers representing the seven Magyar tribes. Offers iconic views of Parliament and the Danube. Lower terrace free 24/7, upper ramparts require ticket.",
"latitude": 47.5023,
"longitude": 19.035,
"admission": "Lower terrace free, upper ramparts 1,500 HUF (€4)",
"hours": "Lower: 24/7, Upper: 9:00-21:00 (summer), 9:00-19:00 (rest of year)",
"visit_duration": "45-60 minutes"
},
{
"id": 3,
"name": "Buda Castle",
"category": "Historic Landmark",
"description": "UNESCO World Heritage Site, once home to Hungarian kings. Now houses the Hungarian National Gallery and Budapest History Museum. Beautiful courtyards and terraces with stunning views of Pest.",
"latitude": 47.4967,
"longitude": 19.0397,
"admission": "Grounds free, museums require separate tickets",
"hours": "Grounds 24/7, museums vary",
"visit_duration": "90-120 minutes"
},
{
"id": 4,
"name": "Matthias Church",
"category": "Religious Site",
"description": "Stunning Gothic church with colorful Zsolnay tiled roof, originally built in 1015. Hosted royal coronations and has excellent acoustics for classical concerts.",
"latitude": 47.5019,
"longitude": 19.0348,
"admission": "3,100 HUF (€8) adults, bell tower extra 3,700 HUF",
"hours": "Mon-Sat 9:00-17:45, Sun 13:00-17:45",
"visit_duration": "45-60 minutes"
},
{
"id": 5,
"name": "Chain Bridge (Széchenyi Lánchíd)",
"category": "Historic Landmark",
"description": "Budapest's oldest permanent bridge (1849), first to connect Buda and Pest. Iconic symbol with stone lions, suspension chains, beautiful when illuminated at night.",
"latitude": 47.4983,
"longitude": 19.0436,
"admission": "Free",
"hours": "24/7",
"visit_duration": "20-30 minutes"
},
{
"id": 6,
"name": "St. Stephen's Basilica",
"category": "Religious Site",
"description": "Neoclassical church named after Hungary's first king, whose mummified right hand is preserved here. 96m height (same as Parliament). Panoramic dome with 360° views.",
"latitude": 47.5009,
"longitude": 19.0534,
"admission": "6,000 HUF (€15) including dome, 20% discount with Budapest Card",
"hours": "Mon-Sat 9:00-17:45, Sun 13:00-17:45",
"visit_duration": "60-90 minutes"
},
{
"id": 7,
"name": "Heroes' Square",
"category": "Monument",
"description": "Iconic square featuring the Millennium Monument with Archangel Gabriel atop central column, surrounded by statues of Hungary's national leaders. Flanked by Museum of Fine Arts and Műcsarnok.",
"latitude": 47.5146,
"longitude": 19.0777,
"admission": "Free",
"hours": "24/7",
"visit_duration": "30-45 minutes"
},
{
"id": 8,
"name": "Széchenyi Thermal Baths",
"category": "Thermal Bath",
"description": "Europe's largest medicinal bath complex with 18 pools (3 outdoor). Neo-baroque architecture, waters from 1,246m deep well. Famous for chess players in outdoor pools, even in winter.",
"latitude": 47.5196,
"longitude": 19.0815,
"admission": "From 8,600 HUF (€22) weekdays, 9,200 HUF (€23) weekends",
"hours": "6:00-22:00 daily",
"visit_duration": "2-4 hours"
},
{
"id": 9,
"name": "Gellért Thermal Baths",
"category": "Thermal Bath",
"description": "Stunning Art Nouveau baths (1912-1918) at foot of Gellért Hill. Famous for blue Zsolnay tiles, marble columns, stained-glass ceilings. 10 pools with wave pool in summer.",
"latitude": 47.4826,
"longitude": 19.0523,
"admission": "From 17,700 HUF (€45)",
"hours": "9:00-19:00 daily",
"visit_duration": "2-3 hours"
},
{
"id": 10,
"name": "Gellért Hill & Citadel",
"category": "Viewpoint",
"description": "235m high hill with panoramic city views. Features Citadel fortress (1851) and Liberty Statue. Easy hike with stunning vistas, especially at sunset.",
"latitude": 47.4867,
"longitude": 19.0463,
"admission": "Free",
"hours": "24/7",
"visit_duration": "60-90 minutes"
},
{
"id": 11,
"name": "Great Market Hall (Central Market)",
"category": "Market",
"description": "Largest and oldest indoor market (1897) with neo-Gothic design and Zsolnay tile roof. Three floors with fresh produce, local foods, souvenirs, and traditional Hungarian street food on upper level.",
"latitude": 47.487,
"longitude": 19.0583,
"admission": "Free entry",
"hours": "Mon 6:00-17:00, Tue-Fri 6:00-18:00, Sat 6:00-15:00, Sun closed",
"visit_duration": "60-90 minutes"
},
{
"id": 12,
"name": "Shoes on the Danube Bank",
"category": "Memorial",
"description": "Poignant Holocaust memorial with 60 pairs of iron shoes honoring 3,500 Jews shot into the Danube by Arrow Cross militia (1944-45). Located 300m south of Parliament.",
"latitude": 47.505,
"longitude": 19.0451,
"admission": "Free",
"hours": "24/7",
"visit_duration": "15-30 minutes"
},
{
"id": 13,
"name": "Dohány Street Synagogue",
"category": "Religious Site",
"description": "Europe's largest synagogue (1859) in Moorish Revival style, seats 3,000. Complex includes Heroes' Temple, Jewish Museum, memorial garden. Located at former ghetto border.",
"latitude": 47.4959,
"longitude": 19.0618,
"admission": "Tickets required, guided tours available",
"hours": "Weekdays only, closed Saturdays and Jewish holidays",
"visit_duration": "60-90 minutes"
},
{
"id": 14,
"name": "Hungarian State Opera House",
"category": "Cultural Venue",
"description": "Neo-Renaissance masterpiece (1884) by Miklós Ybl on Andrássy Avenue. Interior decorated with 7kg of gold. Offers ballet and opera performances, guided tours available.",
"latitude": 47.5027,
"longitude": 19.0586,
"admission": "Tours and performances vary",
"hours": "Tour times vary, performances evenings",
"visit_duration": "45-60 minutes (tour) or 2-3 hours (performance)"
},
{
"id": 15,
"name": "Szimpla Kert",
"category": "Ruin Bar",
"description": "Original and most famous ruin bar (2002) in abandoned building. Eclectic decor with vintage items, multiple rooms, outdoor courtyard. Sunday farmers market. Free concerts.",
"latitude": 47.4968,
"longitude": 19.0631,
"admission": "Free entry, pay for drinks",
"hours": "Daily 12:00-late, Sunday market 9:00-14:00",
"visit_duration": "90-120 minutes"
},
{
"id": 16,
"name": "Vajdahunyad Castle",
"category": "Historic Landmark",
"description": "Eclectic castle in City Park blending Romanesque, Gothic, Renaissance, and Baroque styles. Originally built for 1896 Millennium Exhibition, rebuilt in stone due to popularity.",
"latitude": 47.5148,
"longitude": 19.0826,
"admission": "Grounds free, museum inside requires ticket",
"hours": "Grounds 24/7, museum varies",
"visit_duration": "45-60 minutes"
},
{
"id": 17,
"name": "Andrássy Avenue",
"category": "Street/District",
"description": "Budapest's most elegant boulevard, UNESCO World Heritage Site. Lined with neo-Renaissance townhouses, luxury shops, cafes. Connects city center to Heroes' Square.",
"latitude": 47.5035,
"longitude": 19.064,
"admission": "Free",
"hours": "24/7",
"visit_duration": "60-90 minutes (walking)"
},
{
"id": 18,
"name": "Elizabeth Lookout Tower",
"category": "Viewpoint",
"description": "Fairytale stone tower on János Hill offering 360° panoramic views of Budapest and surrounding hills. On clear days, can spot Mátra mountains.",
"latitude": 47.518,
"longitude": 18.957,
"admission": "Small fee",
"hours": "Varies by season",
"visit_duration": "45-60 minutes"
},
{
"id": 19,
"name": "Váci Street",
"category": "Shopping Street",
"description": "Famous pedestrian shopping street running through city center. Filled with shops, restaurants, cafes. Connects to Great Market Hall at southern end.",
"latitude": 47.495,
"longitude": 19.0525,
"admission": "Free",
"hours": "24/7 (shops vary)",
"visit_duration": "60-90 minutes"
},
{
"id": 20,
"name": "City Park (Városliget)",
"category": "Park",
"description": "Large public park with lake, Vajdahunyad Castle, Széchenyi Baths, Heroes' Square. Popular for walking, boating in summer, ice skating in winter.",
"latitude": 47.5157,
"longitude": 19.0833,
"admission": "Free",
"hours": "24/7",
"visit_duration": "90-120 minutes"
}
]

141
index.html Normal file
View File

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budapest Travel Guide - Interactive Map &amp; Route Planner</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="app-header">
<div class="header-content">
<h1><span class="icon-budapest">🏛️</span> Budapest Travel Guide</h1>
<p>Explore the Pearl of the Danube with our interactive map &amp; route planner</p>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Sidebar -->
<aside class="sidebar">
<!-- Search -->
<div class="search-section">
<div class="form-group">
<input type="text" id="searchInput" class="form-control" placeholder="Search sights...">
</div>
</div>
<!-- Category Filters -->
<div class="filters-section">
<h3>Filter by Category</h3>
<div class="filter-buttons">
<button class="btn btn--sm filter-btn active" data-category="all">All Sights</button>
<button class="btn btn--sm filter-btn" data-category="Historic Landmark">🏛️ Historic</button>
<button class="btn btn--sm filter-btn" data-category="Religious Site">⛪ Religious</button>
<button class="btn btn--sm filter-btn" data-category="Thermal Bath">🛁 Baths</button>
<button class="btn btn--sm filter-btn" data-category="Viewpoint">🏔️ Views</button>
<button class="btn btn--sm filter-btn" data-category="Cultural Venue">🎭 Cultural</button>
<button class="btn btn--sm filter-btn" data-category="Market">🏪 Markets</button>
<button class="btn btn--sm filter-btn" data-category="Memorial">🕊️ Memorials</button>
<button class="btn btn--sm filter-btn" data-category="other">🔸 Other</button>
</div>
</div>
<!-- Route Planning -->
<div class="route-section">
<h3>My Route Planner</h3>
<div class="route-controls">
<button id="placeHotelBtn" class="btn btn--secondary btn--sm">📍 Place My Hotel</button>
<button id="optimizeRouteBtn" class="btn btn--primary btn--sm">⚡ Optimize Route</button>
<button id="clearRouteBtn" class="btn btn--outline btn--sm">🗑️ Clear Route</button>
</div>
<div id="hotelInfo" class="hotel-info hidden">
<div class="hotel-marker">🏨 Hotel Location Set</div>
<button id="removeHotelBtn" class="btn btn--sm btn--outline">Remove Hotel</button>
</div>
<div id="routeStats" class="route-stats hidden">
<div class="stats-row">
<span class="stat-label">Distance:</span>
<span id="totalDistance">0 km (0 mi)</span>
</div>
<div class="stats-row">
<span class="stat-label">Walking Time:</span>
<span id="totalTime">0 minutes</span>
</div>
<div class="stats-row">
<span class="stat-label">Selected:</span>
<span id="selectedCount">0 sights</span>
</div>
</div>
<div id="selectedSights" class="selected-sights"></div>
<button id="downloadRouteBtn" class="btn btn--primary btn--sm btn--full-width hidden">📄 Download Route</button>
</div>
<!-- Sights List -->
<div class="sights-section">
<h3>Budapest Attractions</h3>
<div id="sightsList" class="sights-list"></div>
</div>
<!-- Getting Around Info -->
<div class="info-section">
<h3>Getting Around</h3>
<div class="info-content">
<p><strong>Walking:</strong> Most attractions in city center are within 30-45 minutes walking distance.</p>
<p><strong>Hills:</strong> Buda side has hills - budget extra time for uphill walks.</p>
<p><strong>Public Transport:</strong> Efficient metro, tram, and bus system available.</p>
</div>
</div>
</aside>
<!-- Map Container -->
<div class="map-container">
<div id="map"></div>
<div id="mapInstructions" class="map-instructions">
<div class="instruction-content">
<h4>🗺️ How to Use This Map</h4>
<ul>
<li>Click markers to see sight details</li>
<li>Check sights in sidebar to plan your route</li>
<li>Click "Place My Hotel" then click on map</li>
<li>Use filters to find specific types of attractions</li>
</ul>
<button id="closeInstructions" class="btn btn--sm btn--primary">Got it!</button>
</div>
</div>
</div>
</main>
<!-- Sight Detail Modal -->
<div id="sightModal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle"></h2>
<button id="closeModal" class="btn-close">×</button>
</div>
<div class="modal-body">
<div id="modalContent"></div>
</div>
<div class="modal-footer">
<label class="checkbox-wrapper">
<input type="checkbox" id="modalAddToRoute">
<span>Add to my route</span>
</label>
<button id="zoomToSight" class="btn btn--primary">Show on Map</button>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>
</html>

1463
style.css Normal file
View File

File diff suppressed because it is too large Load Diff