diff --git a/src/components/Map/VMap.client.vue b/src/components/Map/VMap.client.vue index e06be88..f677ceb 100644 --- a/src/components/Map/VMap.client.vue +++ b/src/components/Map/VMap.client.vue @@ -12,6 +12,7 @@ import iconRetina from 'leaflet/dist/images/marker-icon-2x.png' import iconUrl from 'leaflet/dist/images/marker-icon.png' import shadowUrl from 'leaflet/dist/images/marker-shadow.png' import geojsonDefaultOptions from './utils/geojsonOptions' +import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration' import '@geoman-io/leaflet-geoman-free' import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css' @@ -24,8 +25,6 @@ L.Icon.Default.mergeOptions({ shadowUrl: shadowUrl }) -const { map_tile_server, map_tile_attribution } = __APP_ENV__ - const props = defineProps({ controls: { type: Boolean, @@ -115,14 +114,6 @@ let drawnItems let geoJSONGroup const leafletMap = ref(null) -const tiles = { - osm: L.tileLayer(map_tile_server, { - maxZoom: props.maxZoom, - minZoom: props.minZoom, - className: 'map-tiles', - attribution: map_tile_attribution - }) -} const fitBoundsOptions = computed(() => ({ maxZoom: props.zoomBounds, @@ -152,6 +143,14 @@ watch( ) onMounted(() => { + const tiles = makeTileFromConfiguration(L, { + maxZoom: props.maxZoom, + minZoom: props.minZoom, + className: 'map-tiles' + }) + + const [currentTile] = Object.values(tiles) + const options = { center: props.center, zoom: props.zoom, @@ -218,7 +217,14 @@ onMounted(() => { mapObject.on('zoomstart', (e) => emit('zoom:start', e)) } - tiles.osm.addTo(mapObject) + currentTile.addTo(mapObject) + + if (Object.keys(tiles).length > 1) { + L.control + .layers(tiles, {}, { position: 'topleft', collapsed: false }) + .addTo(mapObject) + } + initEvents() }) diff --git a/src/components/Map/utils/makeTileFromConfiguration.js b/src/components/Map/utils/makeTileFromConfiguration.js new file mode 100644 index 0000000..8e7ca49 --- /dev/null +++ b/src/components/Map/utils/makeTileFromConfiguration.js @@ -0,0 +1,18 @@ +const { map_tile_server, map_tile_attribution, map_tiles } = __APP_ENV__ + +export function makeTileFromConfiguration(L, opts) { + const tiles = map_tiles || [ + { + label: 'tile', + server: map_tile_server, + attribution: map_tile_attribution + } + ] + + return Object.fromEntries( + tiles.map(({ server, attribution, label }) => [ + label, + L.tileLayer(server, { ...opts, attribution }) + ]) + ) +}