diff --git a/kjvstudy_org/static/js/biblical-maps.js b/kjvstudy_org/static/js/biblical-maps.js index 7c3c7bb..dd550b3 100644 --- a/kjvstudy_org/static/js/biblical-maps.js +++ b/kjvstudy_org/static/js/biblical-maps.js @@ -1,508 +1,320 @@ /** - * Biblical Maps - Interactive maps for KJV Study - * Uses OpenStreetMap with Leaflet.js (free, no API key required) + * Simple Biblical Maps Implementation + * Uses reliable tile providers with fallback options */ -class BiblicalMaps { +class SimpleBiblicalMaps { constructor() { this.map = null; - this.currentMarkers = []; - this.currentLayer = null; - this.biblicalLocations = this.getBiblicalLocations(); - this.mapLayers = this.getMapLayers(); + this.markers = []; + this.locations = this.getBiblicalLocations(); } - /** - * Initialize the map - */ - init(containerId, options = {}) { - const defaultCenter = [31.7683, 35.2137]; // Jerusalem - const defaultZoom = 7; - - this.map = L.map(containerId, { - center: options.center || defaultCenter, - zoom: options.zoom || defaultZoom, - zoomControl: true, - scrollWheelZoom: true, - doubleClickZoom: true, - boxZoom: true, - keyboard: true, - dragging: true, - touchZoom: true - }); - - // Add default OpenStreetMap layer - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors', - maxZoom: 18, - minZoom: 3 - }).addTo(this.map); - - // Add layer control - this.addLayerControl(); - - // Add biblical locations - this.addBiblicalLocations(); - - return this.map; - } - - /** - * Add layer control for different map types - */ - addLayerControl() { - const baseLayers = { - "OpenStreetMap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' - }), - "Dark Theme": L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { - attribution: '© OpenStreetMap contributors © CARTO', - subdomains: 'abcd', - maxZoom: 20 - }), - "Terrain": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { - attribution: '© OpenTopoMap contributors' - }), - "Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { - attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' - }) - }; - - L.control.layers(baseLayers, this.mapLayers).addTo(this.map); - } - - /** - * Get map overlay layers for different biblical periods - */ - getMapLayers() { - const layers = {}; - - // Create marker groups for different periods - layers["Old Testament Cities"] = L.layerGroup(); - layers["New Testament Cities"] = L.layerGroup(); - layers["Paul's Journeys"] = L.layerGroup(); - layers["Tribal Territories"] = L.layerGroup(); - layers["Major Events"] = L.layerGroup(); - - return layers; - } - - /** - * Biblical locations with coordinates and information - */ - getBiblicalLocations() { - return { - // Major Old Testament Cities - jerusalem: { - name: "Jerusalem", - coords: [31.7683, 35.2137], - type: "city", - period: ["ot", "nt"], - description: "The holy city, site of Solomon's Temple and Jesus's crucifixion", - verses: ["2 Samuel 5:6-7", "1 Kings 6:1", "Matthew 27:33"], - layer: ["Old Testament Cities", "New Testament Cities"] - }, - bethlehem: { - name: "Bethlehem", - coords: [31.7054, 35.2024], - type: "city", - period: ["ot", "nt"], - description: "City of David's birth and Jesus's birth", - verses: ["1 Samuel 16:1", "Micah 5:2", "Matthew 2:1"], - layer: ["Old Testament Cities", "New Testament Cities"] - }, - nazareth: { - name: "Nazareth", - coords: [32.7009, 35.2976], - type: "city", - period: ["nt"], - description: "Jesus's hometown", - verses: ["Matthew 2:23", "Luke 1:26", "Luke 4:16"], - layer: ["New Testament Cities"] - }, - capernaum: { - name: "Capernaum", - coords: [32.8819, 35.5747], - type: "city", - period: ["nt"], - description: "Jesus's ministry headquarters", - verses: ["Matthew 4:13", "Matthew 8:5", "Mark 2:1"], - layer: ["New Testament Cities"] - }, - jericho: { - name: "Jericho", - coords: [31.8667, 35.4444], - type: "city", - period: ["ot", "nt"], - description: "First city conquered by Joshua", - verses: ["Joshua 6:1-27", "Luke 19:1"], - layer: ["Old Testament Cities", "New Testament Cities"] - }, - damascus: { - name: "Damascus", - coords: [33.5138, 36.2765], - type: "city", - period: ["ot", "nt"], - description: "Ancient city, site of Paul's conversion", - verses: ["2 Kings 5:12", "Acts 9:3"], - layer: ["Old Testament Cities", "Paul's Journeys"] - }, - babylon: { - name: "Babylon", - coords: [32.5355, 44.4275], - type: "city", - period: ["ot"], - description: "Capital of Babylonian Empire, site of exile", - verses: ["2 Kings 25:11", "Psalm 137:1", "Daniel 1:1"], - layer: ["Old Testament Cities"] - }, - egypt_memphis: { - name: "Memphis (Egypt)", - coords: [29.8467, 31.2500], - type: "city", - period: ["ot"], - description: "Ancient capital of Egypt", - verses: ["Isaiah 19:13", "Jeremiah 2:16", "Hosea 9:6"], - layer: ["Old Testament Cities"] - }, - mount_sinai: { - name: "Mount Sinai", - coords: [28.5394, 33.9731], - type: "mountain", - period: ["ot"], - description: "Where Moses received the Ten Commandments", - verses: ["Exodus 19:20", "Exodus 24:16", "Deuteronomy 4:10"], - layer: ["Major Events"] - }, - mount_carmel: { - name: "Mount Carmel", - coords: [32.7319, 35.0478], - type: "mountain", - period: ["ot"], - description: "Site of Elijah's contest with Baal's prophets", - verses: ["1 Kings 18:19-40"], - layer: ["Major Events"] - }, - // Paul's Journey Cities - antioch: { - name: "Antioch", - coords: [36.2012, 36.1611], - type: "city", - period: ["nt"], - description: "First Gentile church, Paul's mission base", - verses: ["Acts 11:26", "Acts 13:1"], - layer: ["Paul's Journeys"] - }, - athens: { - name: "Athens", - coords: [37.9755, 23.7348], - type: "city", - period: ["nt"], - description: "Paul preached at the Areopagus", - verses: ["Acts 17:16-34"], - layer: ["Paul's Journeys"] - }, - corinth: { - name: "Corinth", - coords: [37.9065, 22.8756], - type: "city", - period: ["nt"], - description: "Paul established church and wrote letters", - verses: ["Acts 18:1", "1 Corinthians 1:2"], - layer: ["Paul's Journeys"] - }, - ephesus: { - name: "Ephesus", - coords: [37.9495, 27.3517], - type: "city", - period: ["nt"], - description: "Major center of Paul's ministry", - verses: ["Acts 19:1", "Ephesians 1:1", "Revelation 2:1"], - layer: ["Paul's Journeys"] - }, - rome: { - name: "Rome", - coords: [41.9028, 12.4964], - type: "city", - period: ["nt"], - description: "Capital of Roman Empire, Paul's final destination", - verses: ["Acts 28:16", "Romans 1:7"], - layer: ["Paul's Journeys"] - }, - // Bodies of Water - sea_of_galilee: { - name: "Sea of Galilee", - coords: [32.8219, 35.5881], - type: "water", - period: ["ot", "nt"], - description: "Where Jesus called disciples and performed miracles", - verses: ["Matthew 4:18", "Mark 6:47-52", "John 21:1"], - layer: ["New Testament Cities", "Major Events"] - }, - dead_sea: { - name: "Dead Sea", - coords: [31.5590, 35.4732], - type: "water", - period: ["ot", "nt"], - description: "Salt sea, lowest point on earth", - verses: ["Genesis 14:3", "Joshua 3:16"], - layer: ["Old Testament Cities"] - }, - jordan_river: { - name: "Jordan River", - coords: [32.0000, 35.5000], - type: "water", - period: ["ot", "nt"], - description: "River where Jesus was baptized", - verses: ["Joshua 3:17", "Matthew 3:13", "Mark 1:9"], - layer: ["Old Testament Cities", "New Testament Cities"] - }, - // Additional locations - hebron: { - name: "Hebron", - coords: [31.5326, 35.0998], - type: "city", - period: ["ot"], - description: "Where Abraham lived and was buried, David's first capital", - verses: ["Genesis 23:2", "2 Samuel 2:11"], - layer: ["Old Testament Cities"] - }, - samaria: { - name: "Samaria", - coords: [32.2764, 35.1891], - type: "city", - period: ["ot", "nt"], - description: "Capital of Northern Kingdom of Israel", - verses: ["1 Kings 16:24", "John 4:4-9"], - layer: ["Old Testament Cities", "New Testament Cities"] - }, - caesarea: { - name: "Caesarea", - coords: [32.5014, 34.8944], - type: "city", - period: ["nt"], - description: "Roman capital, where Paul was imprisoned", - verses: ["Acts 10:1", "Acts 23:23"], - layer: ["Paul's Journeys"] - }, - philippi: { - name: "Philippi", - coords: [41.0136, 24.2919], - type: "city", - period: ["nt"], - description: "First European city where Paul preached", - verses: ["Acts 16:12", "Philippians 1:1"], - layer: ["Paul's Journeys"] - }, - thessalonica: { - name: "Thessalonica", - coords: [40.6403, 22.9439], - type: "city", - period: ["nt"], - description: "Where Paul established a strong church", - verses: ["Acts 17:1", "1 Thessalonians 1:1"], - layer: ["Paul's Journeys"] - } - }; - } - - /** - * Add all biblical locations to the map - */ - addBiblicalLocations() { - Object.entries(this.biblicalLocations).forEach(([key, location]) => { - const marker = this.createLocationMarker(location); - - // Add marker to appropriate layers - location.layer.forEach(layerName => { - if (this.mapLayers[layerName]) { - this.mapLayers[layerName].addLayer(marker); - } + init(containerId) { + try { + // Initialize map centered on Jerusalem + this.map = L.map(containerId, { + center: [31.7683, 35.2137], + zoom: 7, + zoomControl: true }); + + // Add base tiles with fallback + this.addBaseTiles(); + + // Add all biblical locations + this.addLocations(); + + console.log('Biblical maps initialized successfully'); + return this.map; + } catch (error) { + console.error('Failed to initialize biblical maps:', error); + this.showError(containerId, error.message); + } + } + + addBaseTiles() { + // Primary: CartoDB Voyager (clean, fast) + const primaryTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { + attribution: '© OpenStreetMap © CARTO', + subdomains: 'abcd', + maxZoom: 20 }); - // Add all layers to map by default - Object.values(this.mapLayers).forEach(layer => { - layer.addTo(this.map); + // Fallback: OpenStreetMap + const fallbackTiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors', + maxZoom: 19 + }); + + // Try primary first, fallback on error + primaryTiles.on('tileerror', () => { + console.log('Primary tiles failed, using fallback'); + this.map.removeLayer(primaryTiles); + fallbackTiles.addTo(this.map); + }); + + primaryTiles.addTo(this.map); + + // Additional layer options + const satelliteTiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { + attribution: 'Tiles © Esri' + }); + + const terrainTiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { + attribution: '© OpenTopoMap' + }); + + // Layer control + L.control.layers({ + "Street Map": primaryTiles, + "Satellite": satelliteTiles, + "Terrain": terrainTiles + }).addTo(this.map); + } + + addLocations() { + this.locations.forEach(location => { + const marker = this.createMarker(location); + marker.addTo(this.map); + this.markers.push(marker); }); } - /** - * Create a marker for a biblical location - */ - createLocationMarker(location) { - const icon = this.getLocationIcon(location.type); - const marker = L.marker(location.coords, { icon: icon }); + createMarker(location) { + // Simple colored circle markers + const colors = { + city: '#8B4513', + mountain: '#8B7355', + water: '#4682B4', + temple: '#DAA520', + event: '#DC143C', + journey: '#9932CC' + }; - // Create popup content - const popupContent = this.createPopupContent(location); - marker.bindPopup(popupContent, { - maxWidth: 300, - className: 'biblical-location-popup' + const marker = L.circleMarker(location.coords, { + radius: 8, + fillColor: colors[location.type] || colors.city, + color: '#fff', + weight: 2, + opacity: 1, + fillOpacity: 0.8 }); + // Create popup + const popupContent = this.createPopupContent(location); + marker.bindPopup(popupContent); + return marker; } - /** - * Get appropriate icon for location type - */ - getLocationIcon(type) { - const iconConfigs = { - city: { color: '#8B4513', icon: '🏛️' }, - mountain: { color: '#8B7355', icon: '⛰️' }, - water: { color: '#4682B4', icon: '🌊' }, - temple: { color: '#DAA520', icon: '🕌' }, - event: { color: '#DC143C', icon: '✨' } - }; - - const config = iconConfigs[type] || iconConfigs.city; - - return L.divIcon({ - html: `
${location.description}
-${location.description}
+Unable to load the biblical maps.
+Error: ${message}
+ +Please check your internet connection and refresh the page.
+Explore the geographical context of Scripture with interactive maps showing biblical locations, journeys, and historical events from both the Old and New Testaments.
+Explore the geographical context of Scripture through key biblical locations, from the journeys of the patriarchs to Paul's missionary travels across the ancient world.
Click on map markers to learn about biblical locations and their significance. Use the layer controls to switch between different map styles. Each location includes relevant Scripture references you can click to explore further.
+Understanding the geographical context of biblical events enriches our study of Scripture. These locations span from Egypt to Babylon, from Mount Sinai to Rome, tracing the movement of God's people throughout history. Click on any verse reference to explore the biblical text.
The holy city, center of Jewish worship and site of Solomon's Temple. Here Jesus was crucified and rose again, and the early church was born.
+The city of David's birth and Jesus's birth. Known as the "House of Bread," this small town played a crucial role in salvation history.
+Jesus's hometown in Galilee, where He grew up and began His ministry. A humble village that became famous as the home of the Messiah.
+Jesus's ministry headquarters by the Sea of Galilee. Many miracles occurred here, and it was home to several disciples.
+Ancient city where Paul encountered the risen Christ and was converted. A major center of early Christianity.
+Capital of the Babylonian Empire, where the Jews were exiled. Symbol of worldly power opposing God's kingdom.
+First Gentile church and Paul's mission base. Here believers were first called "Christians" and missionary work began.
+Intellectual center of Greece where Paul preached to philosophers at the Areopagus, bridging faith and reason.
+Major Greek commercial city where Paul established a church and wrote letters. Known for its diversity and challenges.
+Important city in Paul's third missionary journey. Center of Diana worship that became a strong Christian community.
+Capital of the Roman Empire, Paul's final destination. The gospel reached the heart of the ancient world.
+First European city where Paul preached. Site of Lydia's conversion and Paul's imprisonment with Silas.
+The holy mountain where Moses received the Ten Commandments and the Law. A place of divine revelation and covenant.
+Site of Elijah's dramatic contest with the prophets of Baal, demonstrating the power of the one true God.
+Where Jesus often prayed and taught His disciples. Site of His ascension and prophesied return.
+Site of Solomon's Temple and later Herod's Temple. The center of Jewish worship and Jesus's ministry.
+Where Jesus walked on water, called fishermen to follow Him, and performed many miracles. Center of His Galilean ministry.
+Where Jesus was baptized by John the Baptist and where Joshua led Israel across into the Promised Land.
+The salt sea, lowest point on Earth. Associated with Sodom and Gomorrah and God's judgment.
+