Seurasaari Open-Air Museum | Interactive Guide

An interactive web-based guide for exploring the Seurasaari Open-Air Museum with dual views (map and list), multilingual support, and location markers with detailed information.

📁 Project Structure

index.html

The main interactive guide application featuring:

• Map View: Click-able markers positioned on a museum map image
• List View: Browse all locations in a scrollable list
• Search: Real-time search across location names, descriptions, and categories
• Location Details: Modal panels with comprehensive information about each exhibit
• Multilingual Support: English and German language switching
• Responsive Design: Mobile-friendly layout with smooth transitions

marker-placement.html

A utility tool for creating and positioning markers on the museum map:

• Drag markers to precise locations on the map
• View real-time coordinate updates (in percentage format)
• Export coordinates in plain text or JavaScript format
• Copy-paste ready data for updating the main guide

🚀 Getting Started

Requirements

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A map image file named map.jpg in the same directory as the HTML files

Basic Usage

1. Main Guide (index.html)

   • Open index.html in your browser
   • Toggle between Map and List views using the buttons in the header
   • Search for locations by name, region, or category
   • Click any marker or search result to view detailed information
   • Switch languages using the language selector (EN/DE)

2. Marker Placement Tool (marker-placement.html)

   • Open marker-placement.html in your browser
   • Drag any marker to a new position
   • Watch the coordinates update in the toolbar
   • Use keyboard shortcuts:
     • E - Export coordinates as plain text
     • J - Export as JavaScript array
   • Click "Export JS" to copy coordinates for use in the main guide
   • Click "Reset" to reload the original marker positions

🎨 Features

Main Guide Features

Search & Browse

• Full-text search across all locations
• Filter by category (Building, Garden, etc.)
• Quick access to "must see" highlighted locations
• Display up to 10 results with category badges

Location Information

• Year built / age of structure
• Original region/location in Finland
• Walking time from museum entrance
• Accessibility (interior/exterior only)
• Feature tags (wheelchair accessible, photo spots, etc.)
• Visitor tips and external links (Wikipedia, museum website)

Visual Design

• Clean, elegant interface with earth-tone color scheme
• Smooth animations and transitions
• Optimized layout for both desktop and mobile devices
• Semantic HTML with proper accessibility considerations

Localization

• Complete English and German translations
• Language persistence within session
• Bidirectional text support

Marker Placement Tool Features

• Live coordinate feedback with precision to 0.1%
• Crosshair cursor for exact positioning
• Hover effects showing marker index
• Smooth dragging with visual feedback
• Multiple export formats for integration

📊 Data Structure

Location Object Format

{
    id: 1,
    x: 47.5,                    // Position X (0-100%)
    y: 27.5,                    // Position Y (0-100%)
    title: {
        en: "English Name",
        de: "German Name"
    },
    desc: {
        en: "English description...",
        de: "German description..."
    },
    category: "building",        // building, garden, etc.
    region: "Uusimaa",
    year: "1920",
    walkTime: "10 min",
    access: "summer",            // summer | exterior
    highlight: true,             // Featured location
    features: [
        "wheelchairAccessible",
        "photoSpot",
        "interiorOpen"
    ],
    tip: {
        en: "Visitor tip...",
        de: "Besuchertipp..."
    },
    links: {
        wikipedia: {
            en: "https://...",
            de: "https://..."
        },
        museum: "https://..."
    }
}

🛠️ Customization

Updating Marker Positions

1. Open marker-placement.html
2. Drag markers to desired positions
3. Press J or click "Export JS"
4. Copy the JavaScript array from the output panel
5. Paste into the markers array in index.html

Updating Location Information

Edit the locations array in index.html to modify:

• Location names and descriptions (bilingual)
• Categories and regions
• Year built and access restrictions
• Features and special tags
• External links and tips

Styling

The app uses CSS custom properties (variables) for easy theming:

--primary: #1e4d3a;      /* Main green */
--accent: #c4553d;       /* Rust red */
--gold: #c9a227;         /* Accent gold */
--cream: #faf8f5;        /* Background */

Modify these values in the :root CSS section to change the color scheme globally.

Translations

Add new languages by:

1. Creating a new language object in the translations object
2. Adding language buttons in the header
3. Adding a case in the language switcher JavaScript

📱 Browser Compatibility

• ✅ Chrome/Edge 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

⚡ Performance Notes

• Lazy-loads marker creation on image load
• Smooth CSS transitions for minimal jank
• Optimized event handlers with proper cleanup
• Responsive grid layout using flexbox

🔧 Keyboard Shortcuts

📝 Notes for Developers

• The coordinate system uses percentage-based positioning (0-100%) for responsive scaling
• All text content is internationalized via the getLocalizedText() function
• Modal info is dynamically generated based on location data
• Marker highlighting uses CSS classes for smooth transitions
• The search algorithm is case-insensitive and supports partial matches

📄 License

This project is designed for the Seurasaari Open-Air Museum. Modify and distribute as needed.

Made for interactive museum exploration • Map-based navigation • Multilingual support