mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-13 18:51:38 -05:00
Move base maps to a separate file
This commit is contained in:
Eugene Burmakin
parent
aaa3c77162
commit
38573e703e
5 changed files with 93 additions and 171 deletions
|
|
@ -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}`)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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) | © <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: '© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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', {
|
||||
|
|
|
|||
44
app/javascript/maps/maps_config.js
Normal file
44
app/javascript/maps/maps_config.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
export const mapsConfig = {
|
||||
"OpenStreetMap": {
|
||||
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
maxZoom: 19,
|
||||
attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
|
||||
},
|
||||
"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 <a href='https://memomaps.de/'>memomaps.de</a> <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, map data © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
|
||||
},
|
||||
"openTopo": {
|
||||
url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
|
||||
maxZoom: 17,
|
||||
attribution: "Map data: © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, <a href='http://viewfinderpanoramas.org'>SRTM</a> | Map style: © <a href='https://opentopomap.org'>OpenTopoMap</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/'>CC-BY-SA</a>)"
|
||||
},
|
||||
"cyclOsm": {
|
||||
url: "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
|
||||
maxZoom: 20,
|
||||
attribution: "<a href='https://github.com/cyclosm/cyclosm-cartocss-style/releases' title='CyclOSM - Open Bicycle render'>CyclOSM</a> | Map data: © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> 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
|
||||
}
|
||||
};
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue