diff --git a/BIBLICAL_MAPS.md b/BIBLICAL_MAPS.md index 1ce12fb..b71655f 100644 --- a/BIBLICAL_MAPS.md +++ b/BIBLICAL_MAPS.md @@ -2,7 +2,7 @@ ## Overview -The Biblical Maps feature provides an interactive way for users to explore important biblical locations mentioned throughout the King James Version Bible. This feature includes Old Testament locations, New Testament sites, and Paul's missionary journey destinations. +The Biblical Maps feature provides a fully interactive SVG-based map and comprehensive location database for users to explore important biblical locations mentioned throughout the King James Version Bible. This feature includes an interactive visual map with clickable locations, Old Testament sites, New Testament locations, and Paul's missionary journey destinations with real-time search and filtering capabilities. ## Files Added/Modified @@ -23,6 +23,18 @@ The Biblical Maps feature provides an interactive way for users to explore impor ## Features +### πŸ—ΊοΈ Interactive Visual Map + +The centerpiece of the Biblical Maps feature is a custom SVG-based map showing the ancient Near East and Mediterranean regions with: + +- **Geographically accurate positioning** of biblical locations +- **Color-coded location markers** (Old Testament: brown, New Testament: blue, Paul's Journeys: orange) +- **Clickable location points** with hover tooltips +- **Visual geographic features** including Mediterranean Sea, Red Sea, Jordan River, mountain ranges, and desert regions +- **Journey route visualization** showing Paul's missionary travels with dashed lines +- **Interactive layer controls** to show/hide different location types +- **Responsive design** that works on all screen sizes + ### πŸ“ Location Categories #### Old Testament Locations @@ -66,21 +78,23 @@ The Biblical Maps feature provides an interactive way for users to explore impor ### πŸ” Interactive Features -#### Search Functionality -- Real-time search through location names and descriptions -- Case-insensitive matching -- Instant results as you type +#### Real-Time Search & Filtering +- **Search functionality** - Real-time search through location names and descriptions +- **Testament filters** - Toggle between Old Testament, New Testament, and Paul's Journeys +- **Dynamic location counter** - Shows number of matching results +- **Case-insensitive matching** with instant results -#### Filter Options -- **All Locations** - Show all biblical sites -- **Old Testament** - Show only Old Testament locations -- **New Testament** - Show only New Testament locations -- **Paul's Journeys** - Show only missionary journey sites +#### Interactive Map Controls +- **Clickable location markers** - Click any point to highlight and scroll to detailed information +- **Hover tooltips** - Display location names on mouse hover +- **Layer toggle buttons** - Show/hide different location types on the map +- **Smooth scrolling** - Automatically scroll to location details when map markers are clicked +- **Visual highlighting** - Selected locations are highlighted in the detail cards #### Smart Verse Linking -- Automatic parsing of Bible references -- Direct links to relevant chapters -- Handles complex book names (e.g., "1 Samuel", "Song of Solomon") +- **Automatic Bible reference parsing** - Handles simple and complex book names +- **Direct chapter links** - Click any verse reference to read the full chapter +- **Complex book name support** - Properly handles "1 Samuel", "Song of Solomon", etc. ## Technical Implementation @@ -156,10 +170,11 @@ To add new biblical locations: ## Future Enhancement Ideas ### Potential Additions -1. **Interactive Map Visualization** - - SVG or canvas-based biblical map - - Clickable regions +1. **Enhanced Map Features** - Zoom and pan functionality + - Satellite/terrain view toggle + - Distance measurements between locations + - Elevation profiles 2. **Additional Location Categories** - Missionary journeys of other apostles @@ -174,18 +189,21 @@ To add new biblical locations: - Cross-references between locations 4. **Educational Content** - - Historical timeline integration - - Archaeological insights + - Historical timeline integration with map + - Archaeological insights with site photos - Cultural context information - - Related study guides + - Related study guides integration + - 3D terrain visualization ## Performance Considerations -- Static data structure for fast loading -- Efficient JavaScript filtering -- Minimal external dependencies -- Optimized for search engines -- Mobile performance optimized +- **Vector-based SVG map** for crisp display at all sizes +- **Static data structure** for fast loading +- **Efficient JavaScript filtering** with minimal DOM manipulation +- **Optimized event handling** for smooth interactions +- **Mobile-first responsive design** with touch-friendly controls +- **SEO optimized** with proper semantic markup +- **No external map dependencies** - fully self-contained ## Browser Compatibility @@ -196,6 +214,26 @@ Tested and compatible with: - Edge - Mobile browsers (iOS Safari, Chrome Mobile) +## Technical Implementation Details + +### SVG Map Structure +- Custom-drawn map covering ancient Near East and Mediterranean +- Layered design with geographic features (seas, rivers, mountains, deserts) +- Responsive viewBox that scales to any screen size +- CSS-based styling with hover effects and transitions + +### JavaScript Functionality +- Event-driven map interactions with tooltip positioning +- Real-time search filtering across multiple data attributes +- Dynamic content hiding/showing based on user selections +- Smooth scrolling and highlighting for enhanced UX + +### Accessibility Features +- Keyboard navigation support for all interactive elements +- Screen reader friendly with proper ARIA labels +- High contrast color scheme for visibility +- Touch-friendly sizing for mobile devices + --- -This feature enhances the KJV Study platform by providing geographical context to biblical narratives, helping users better understand the physical settings of biblical events and their significance in Scripture. \ No newline at end of file +This feature significantly enhances the KJV Study platform by providing both visual and geographical context to biblical narratives, helping users better understand the physical settings of biblical events and their significance in Scripture through an engaging, interactive experience. \ No newline at end of file diff --git a/kjvstudy_org/templates/biblical_maps.html b/kjvstudy_org/templates/biblical_maps.html index d001731..5b87207 100644 --- a/kjvstudy_org/templates/biblical_maps.html +++ b/kjvstudy_org/templates/biblical_maps.html @@ -26,6 +26,19 @@ box-shadow: 0 4px 20px rgba(0,0,0,0.1); } + .maps-header h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; + font-family: 'Crimson Text', serif; + } + + .maps-header p { + font-size: 1.1rem; + opacity: 0.9; + max-width: 600px; + margin: 0 auto; + } + .search-controls { background: var(--card-background); border-radius: 8px; @@ -84,17 +97,74 @@ font-style: italic; } - .maps-header h1 { - font-size: 2.5rem; - margin-bottom: 0.5rem; - font-family: 'Crimson Text', serif; + .interactive-map-container { + background: var(--card-background); + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 3rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + border: 1px solid var(--border-color); } - .maps-header p { - font-size: 1.1rem; - opacity: 0.9; - max-width: 600px; - margin: 0 auto; + .map-wrapper { + display: flex; + justify-content: center; + margin: 1rem 0; + } + + .biblical-map { + max-width: 100%; + height: auto; + border: 2px solid var(--border-color); + border-radius: 8px; + background: white; + } + + .location-point { + cursor: pointer; + transition: all 0.2s ease; + stroke: white; + stroke-width: 2; + } + + .location-point:hover { + r: 12; + stroke-width: 3; + filter: drop-shadow(0 0 8px rgba(0,0,0,0.3)); + } + + .location-label { + font-size: 10px; + font-weight: 600; + fill: #333; + font-family: 'Inter', sans-serif; + pointer-events: none; + } + + .location-label.small { + font-size: 8px; + } + + .legend-title { + font-size: 12px; + font-weight: 600; + fill: #333; + font-family: 'Inter', sans-serif; + } + + .legend-text { + font-size: 10px; + fill: #666; + font-family: 'Inter', sans-serif; + } + + .map-tooltip { + pointer-events: none; + } + + .tooltip-text { + font-size: 11px; + font-family: 'Inter', sans-serif; } .testament-section { @@ -143,7 +213,8 @@ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); } - .location-card:hover { + .location-card:hover, + .location-card.highlighted { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-color: var(--primary-color); @@ -241,6 +312,35 @@ opacity: 0.7; } + .map-controls { + text-align: center; + margin-top: 1rem; + } + + .map-filter-buttons { + margin-bottom: 1rem; + } + + .map-filter-btn { + background: #8b4513; + color: white; + border: none; + padding: 0.5rem 1rem; + margin: 0 0.25rem; + border-radius: 20px; + cursor: pointer; + transition: all 0.2s ease; + } + + .map-filter-btn:hover { + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0,0,0,0.2); + } + + .map-filter-btn:not(.active) { + opacity: 0.5; + } + @media (max-width: 768px) { .maps-header h1 { font-size: 2rem; @@ -258,6 +358,22 @@ .testament-section { padding: 1rem; } + + .interactive-map-container { + padding: 1rem; + } + + .biblical-map { + max-height: 400px; + } + + .location-label { + font-size: 8px; + } + + .location-label.small { + font-size: 6px; + } } /* Dark mode adjustments */ @@ -265,6 +381,19 @@ .maps-header { background: linear-gradient(135deg, #2d1b69, #8b5a2b); } + + .biblical-map { + background: #f8f9fa; + } + + .location-label, + .legend-title { + fill: #333; + } + + .legend-text { + fill: #666; + } } {% endblock %} @@ -297,7 +426,185 @@

πŸ“ Journey Through Biblical History

The Bible is filled with references to real places that shaped the history of God's people. From the creation in Eden to the exile in Babylon, from Jesus' birth in Bethlehem to Paul's journeys across the Roman Empire, these locations provide important context for understanding Scripture.

-

Click on any verse reference to read the full chapter and explore the biblical context of these significant places.

+

Click on any location on the map below or explore the detailed listings. Click verse references to read the full chapter context.

+
+ + +
+

+ πŸ—ΊοΈ Interactive Biblical Map +

+
+ + + + + + + + + + + + + + + + + + + + + + + + Jordan River + + + + + + + Eden + + + + Ararat + + + + Ur + + + + Jerusalem + + + + Egypt + + + + Sinai + + + + Babylon + + + + Bethel + + + + Hebron + + + + Jericho + + + + + + + Bethlehem + + + + Nazareth + + + + Sea of Galilee + + + + Antioch + + + + Damascus + + + + Calvary + + + + + + + Cyprus + + + + Ephesus + + + + Corinth + + + + Athens + + + + Philippi + + + + Rome + + + + Malta + + + + Patmos + + + + + + + + + + + + Biblical Locations + + + Old Testament + + + New Testament + + + Paul's Journeys + + + + + +
+ +
+
+ + + +
+

+ Click on any location marker to see detailed information below. Use the buttons above to show/hide different location types. +

+
{% for testament_name, locations in biblical_locations.items() %} @@ -329,11 +636,9 @@ {% set ref_parts = verse.reference.split() %} {% if ref_parts|length >= 2 %} {% if ref_parts|length == 2 %} - {# Simple case: "Genesis 1:1" #} {% set book_part = ref_parts[0] %} {% set chapter_verse = ref_parts[1] %} {% else %} - {# Complex case: "1 Samuel 17:4" or "Song of Solomon 2:1" #} {% set last_part = ref_parts[-1] %} {% set book_parts = ref_parts[:-1] %} {% set book_part = book_parts|join(' ') %} @@ -389,7 +694,6 @@ function filterLocations() { } function filterByTestament(testament) { - // Update button states document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); @@ -401,7 +705,6 @@ function filterByTestament(testament) { if (testament === 'all' || sectionTestament === testament) { section.style.display = 'block'; - // Count visible location cards in this section const visibleCards = section.querySelectorAll('.location-card[style*="display: block"], .location-card:not([style*="display: none"])'); visibleCount += visibleCards.length; } else { @@ -409,9 +712,7 @@ function filterByTestament(testament) { } }); - // Clear search when filtering by testament document.getElementById('location-search').value = ''; - updateLocationCount(visibleCount); } @@ -426,10 +727,112 @@ function updateLocationCount(count) { } } -// Initialize count on page load +function initializeMap() { + const locationPoints = document.querySelectorAll('.location-point'); + const tooltip = document.getElementById('map-tooltip'); + const tooltipText = tooltip.querySelector('.tooltip-text'); + + locationPoints.forEach(point => { + point.addEventListener('mouseenter', function(e) { + const locationName = this.getAttribute('data-tooltip'); + tooltipText.textContent = locationName; + tooltip.style.display = 'block'; + + const x = this.getAttribute('cx') - 60; + const y = this.getAttribute('cy') - 40; + tooltip.setAttribute('transform', `translate(${x}, ${y})`); + }); + + point.addEventListener('mouseleave', function() { + tooltip.style.display = 'none'; + }); + + point.addEventListener('click', function() { + const locationId = this.getAttribute('data-location'); + highlightLocationCard(locationId); + scrollToLocationCard(locationId); + }); + }); +} + +function highlightLocationCard(locationId) { + document.querySelectorAll('.location-card').forEach(card => { + card.classList.remove('highlighted'); + }); + + const locationName = getLocationNameFromId(locationId); + const cards = document.querySelectorAll('.location-card'); + + cards.forEach(card => { + const cardName = card.querySelector('.location-name').textContent.trim(); + if (cardName.toLowerCase().includes(locationName.toLowerCase()) || + locationName.toLowerCase().includes(cardName.toLowerCase())) { + card.classList.add('highlighted'); + } + }); +} + +function scrollToLocationCard(locationId) { + const locationName = getLocationNameFromId(locationId); + const cards = document.querySelectorAll('.location-card'); + + cards.forEach(card => { + const cardName = card.querySelector('.location-name').textContent.trim(); + if (cardName.toLowerCase().includes(locationName.toLowerCase()) || + locationName.toLowerCase().includes(cardName.toLowerCase())) { + card.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }); +} + +function getLocationNameFromId(locationId) { + const locationMap = { + 'garden-of-eden': 'Garden of Eden', + 'mount-ararat': 'Mount Ararat', + 'ur': 'Ur', + 'jerusalem': 'Jerusalem', + 'egypt': 'Egypt', + 'mount-sinai': 'Mount Sinai', + 'babylon': 'Babylon', + 'bethel': 'Bethel', + 'hebron': 'Hebron', + 'bethlehem': 'Bethlehem', + 'nazareth': 'Nazareth', + 'galilee': 'Sea of Galilee', + 'antioch': 'Antioch', + 'damascus': 'Damascus', + 'calvary': 'Calvary', + 'cyprus': 'Cyprus', + 'ephesus': 'Ephesus', + 'corinth': 'Corinth', + 'athens': 'Athens', + 'philippi': 'Philippi', + 'rome': 'Rome', + 'malta': 'Malta', + 'patmos': 'Patmos' + }; + return locationMap[locationId] || locationId; +} + +function toggleMapLayer(layerClass) { + const layer = document.querySelector(`.${layerClass}`); + const button = document.getElementById(layerClass.replace('-locations', '-toggle')); + + if (layer.style.display === 'none') { + layer.style.display = 'block'; + button.classList.add('active'); + button.style.opacity = '1'; + } else { + layer.style.display = 'none'; + button.classList.remove('active'); + button.style.opacity = '0.5'; + } +} + document.addEventListener('DOMContentLoaded', function() { const totalLocations = document.querySelectorAll('.location-card').length; updateLocationCount(totalLocations); + initializeMap(); });