diff --git a/app/javascript/controllers/base_controller.js b/app/javascript/controllers/base_controller.js index ab6f12f7..f9cd6faa 100644 --- a/app/javascript/controllers/base_controller.js +++ b/app/javascript/controllers/base_controller.js @@ -19,5 +19,7 @@ export default class extends Controller { const selfHosted = document.documentElement.dataset.selfHosted === 'true' this.selfHostedValue = selfHosted } + + console.log(`Self-hosted mode in base controller: ${this.selfHostedValue}`) } } diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 9cf82ee4..1ebacde0 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -32,6 +32,7 @@ import "leaflet-draw"; import { initializeFogCanvas, drawFogCanvas, createFogOverlay } from "../maps/fog_of_war"; import { TileMonitor } from "../maps/tile_monitor"; import BaseController from "./base_controller"; +import { createMapLayer, createAllMapLayers } from "../maps/layers"; export default class extends BaseController { static targets = ["container"]; @@ -404,17 +405,15 @@ export default class extends BaseController { baseMaps() { let selectedLayerName = this.userSettings.preferred_map_layer || "OpenStreetMap"; - let maps = { - OpenStreetMap: osmMapLayer(this.map, selectedLayerName), - "OpenStreetMap.HOT": osmHotMapLayer(this.map, selectedLayerName), - OPNV: OPNVMapLayer(this.map, selectedLayerName), - openTopo: openTopoMapLayer(this.map, selectedLayerName), - cyclOsm: cyclOsmMapLayer(this.map, selectedLayerName), - esriWorldStreet: esriWorldStreetMapLayer(this.map, selectedLayerName), - esriWorldTopo: esriWorldTopoMapLayer(this.map, selectedLayerName), - esriWorldImagery: esriWorldImageryMapLayer(this.map, selectedLayerName), - esriWorldGrayCanvas: esriWorldGrayCanvasMapLayer(this.map, selectedLayerName) - }; + let maps; // Declare the variable first + + if (this.selfHostedValue) { + maps = createAllMapLayers(this.map, selectedLayerName); + } else { + maps = { + OpenStreetMap: createMapLayer(this.map, selectedLayerName, "OpenStreetMap") + }; + } // Add custom map if it exists in settings if (this.userSettings.maps && this.userSettings.maps.url) { diff --git a/app/javascript/maps/layers.js b/app/javascript/maps/layers.js index c32200cc..87501e65 100644 --- a/app/javascript/maps/layers.js +++ b/app/javascript/maps/layers.js @@ -1,5 +1,40 @@ // Yeah I know it should be DRY but this is me doing a KISS at 21:00 on a Sunday night +// Import the maps configuration +import { mapsConfig } from './maps_config'; + +export function createMapLayer(map, selectedLayerName, layerKey) { + const config = mapsConfig[layerKey]; + + if (!config) { + console.warn(`No configuration found for layer: ${layerKey}`); + return null; + } + + let layer = L.tileLayer(config.url, { + maxZoom: config.maxZoom, + attribution: config.attribution, + // Add any other config properties that might be needed + }); + + if (selectedLayerName === layerKey) { + return layer.addTo(map); + } else { + return layer; + } +} + +// Helper function to create all map layers +export function createAllMapLayers(map, selectedLayerName) { + const layers = {}; + + Object.keys(mapsConfig).forEach(layerKey => { + layers[layerKey] = createMapLayer(map, selectedLayerName, layerKey); + }); + + return layers; +} + export function osmMapLayer(map, selectedLayerName) { let layerName = 'OpenStreetMap'; @@ -57,166 +92,6 @@ export function openTopoMapLayer(map, selectedLayerName) { } } -// export function stadiaAlidadeSmoothMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaAlidadeSmooth'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaAlidadeSmoothDarkMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaAlidadeSmoothDark'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaAlidadeSatelliteMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaAlidadeSatellite'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© CNES, Distribution Airbus DS, © Airbus DS, © PlanetObserver (Contains Copernicus Data) | © Stadia Maps © OpenMapTiles © OpenStreetMap contributors', -// ext: 'jpg' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaOsmBrightMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaOsmBright'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaOutdoorMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaOutdoor'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaStamenTonerMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaStamenToner'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaStamenTonerBackgroundMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaStamenTonerBackground'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaStamenTonerLiteMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaStamenTonerLite'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 20, -// attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaStamenWatercolorMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaStamenWatercolor'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.{ext}', { -// minZoom: 1, -// maxZoom: 16, -// attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', -// ext: 'jpg' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - -// export function stadiaStamenTerrainMapLayer(map, selectedLayerName) { -// let layerName = 'stadiaStamenTerrain'; -// let layer = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.{ext}', { -// minZoom: 0, -// maxZoom: 18, -// attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', -// ext: 'png' -// }); - -// if (selectedLayerName === layerName) { -// return layer.addTo(map); -// } else { -// return layer; -// } -// } - export function cyclOsmMapLayer(map, selectedLayerName) { let layerName = 'cyclOsm'; let layer = L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', { diff --git a/app/javascript/maps/maps_config.js b/app/javascript/maps/maps_config.js new file mode 100644 index 00000000..c0017df6 --- /dev/null +++ b/app/javascript/maps/maps_config.js @@ -0,0 +1,44 @@ +export const mapsConfig = { + "OpenStreetMap": { + url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", + maxZoom: 19, + attribution: "© OpenStreetMap" + }, + "OpenStreetMap.HOT": { + url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", + maxZoom: 19, + attribution: "© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France" + }, + "OPNV": { + url: "https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png", + maxZoom: 18, + attribution: "Map memomaps.de CC-BY-SA, map data © OpenStreetMap contributors" + }, + "openTopo": { + url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", + maxZoom: 17, + attribution: "Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)" + }, + "cyclOsm": { + url: "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png", + maxZoom: 20, + attribution: "CyclOSM | Map data: © OpenStreetMap contributors" + }, + "esriWorldStreet": { + url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", + attribution: "Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012" + }, + "esriWorldTopo": { + url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", + attribution: "Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community" + }, + "esriWorldImagery": { + url: "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" + }, + "esriWorldGrayCanvas": { + url: "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}", + attribution: "Tiles © Esri — Esri, DeLorme, NAVTEQ", + maxZoom: 16 + } +}; diff --git a/config/initializers/01_constants.rb b/config/initializers/01_constants.rb index 47dbf379..09d57374 100644 --- a/config/initializers/01_constants.rb +++ b/config/initializers/01_constants.rb @@ -21,3 +21,5 @@ NOMINATIM_API_USE_HTTPS = ENV.fetch('NOMINATIM_API_USE_HTTPS', 'true') == 'true' GEOAPIFY_API_KEY = ENV.fetch('GEOAPIFY_API_KEY', nil) # /Reverse geocoding settings + +DEFAULT_MAP_TILES_URL = ENV.fetch('DEFAULT_MAP_TILES_URL', nil)