From 04d567f1d05073a4f5a98d5c4f199be3a1242f15 Mon Sep 17 00:00:00 2001 From: David Stone Date: Mon, 20 Apr 2026 14:41:13 +0100 Subject: [PATCH 1/4] Add ERSI aerial style --- .../plugins/map/routes/vts/esri-aerial.json | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/server/plugins/map/routes/vts/esri-aerial.json diff --git a/src/server/plugins/map/routes/vts/esri-aerial.json b/src/server/plugins/map/routes/vts/esri-aerial.json new file mode 100644 index 000000000..7336c5b86 --- /dev/null +++ b/src/server/plugins/map/routes/vts/esri-aerial.json @@ -0,0 +1,23 @@ +{ + "version": 8, + "name": "Esri World Imagery", + "sources": { + "esri-world-imagery": { + "type": "raster", + "tiles": [ + "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" + ], + "tileSize": 256, + "attribution": "Tiles © Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community" + } + }, + "layers": [ + { + "id": "esri-world-imagery-layer", + "type": "raster", + "source": "esri-world-imagery", + "minzoom": 0, + "maxzoom": 22 + } + ] +} From df212811cb35e2e1f1e26b46556af41acfc77e4b Mon Sep 17 00:00:00 2001 From: David Stone Date: Mon, 20 Apr 2026 14:41:36 +0100 Subject: [PATCH 2/4] Add ESRI aerial to the map configuration --- src/client/javascripts/map.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/client/javascripts/map.js b/src/client/javascripts/map.js index 2f37d7fce..014d055fa 100644 --- a/src/client/javascripts/map.js +++ b/src/client/javascripts/map.js @@ -13,7 +13,8 @@ const COMPANY_SYMBOL_CODE = 169 const defaultData = { VTS_OUTDOOR_URL: '/api/maps/vts/OS_VTS_3857_Outdoor.json', VTS_DARK_URL: '/api/maps/vts/OS_VTS_3857_Dark.json', - VTS_BLACK_AND_WHITE_URL: '/api/maps/vts/OS_VTS_3857_Black_and_White.json' + VTS_BLACK_AND_WHITE_URL: '/api/maps/vts/OS_VTS_3857_Black_and_White.json', + VTS_AERIAL_URL: '/api/maps/vts/esri-aerial.json' } /** @@ -317,6 +318,13 @@ export function createMap(mapId, initConfig, mapsConfig) { logo: `${assetPath}/interactive-map/assets/images/os-logo-black.svg`, logoAltText, attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` + }, + { + id: 'aerial', + label: 'Aerial', + url: data.VTS_AERIAL_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/aerial-map-thumb.jpg`, + attribution: `Tiles ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community ${new Date().getFullYear()}` } ] }), @@ -388,6 +396,7 @@ export function centerMap(map, mapProvider, center) { * @property {string} VTS_OUTDOOR_URL - the outdoor tile URL * @property {string} VTS_DARK_URL - the dark tile URL * @property {string} VTS_BLACK_AND_WHITE_URL - the black and white tile URL + * @property {string} VTS_AERIAL_URL - the aerial tile URL */ /** From 6a484aaa6eb4b0fbb5a652dc94f14021a38059d9 Mon Sep 17 00:00:00 2001 From: David Stone Date: Mon, 20 Apr 2026 15:07:10 +0100 Subject: [PATCH 3/4] Sonar fixes (Reduce fn size) --- src/client/javascripts/map.js | 90 +++++++++++++++++++---------------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/src/client/javascripts/map.js b/src/client/javascripts/map.js index 014d055fa..3d808eb84 100644 --- a/src/client/javascripts/map.js +++ b/src/client/javascripts/map.js @@ -252,6 +252,55 @@ export const transformGeocodeRequest = (request) => { return new Request(url.toString(), request.options) } +/** + * Gets the map styles for the interactive map style switcher plugin + * @param {TileData} data - the tile data config + * @param {string} assetPath + */ +function getMapStyles(data, assetPath) { + const logoAltText = 'Ordnance survey logo' + + return [ + { + id: 'outdoor', + label: 'Outdoor', + url: data.VTS_OUTDOOR_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/outdoor-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}`, + backgroundColor: '#f5f5f0' + }, + { + id: 'dark', + label: 'Dark', + url: data.VTS_DARK_URL, + mapColorScheme: 'dark', + appColorScheme: 'dark', + thumbnail: `${assetPath}/interactive-map/assets/images/dark-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo-white.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` + }, + { + id: 'black-and-white', + label: 'Black/White', + url: data.VTS_BLACK_AND_WHITE_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/black-and-white-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo-black.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` + }, + { + id: 'aerial', + label: 'Aerial', + url: data.VTS_AERIAL_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/aerial-map-thumb.jpg`, + attribution: `Tiles ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community ${new Date().getFullYear()}` + } + ] +} + /** * Create a Defra map instance * @param {string} mapId - the map id @@ -260,7 +309,6 @@ export const transformGeocodeRequest = (request) => { */ export function createMap(mapId, initConfig, mapsConfig) { const { assetPath, apiPath, data = defaultData } = mapsConfig - const logoAltText = 'Ordnance survey logo' // @ts-expect-error - Defra namespace currently comes from UMD support files const defra = window.defra @@ -288,45 +336,7 @@ export function createMap(mapId, initConfig, mapsConfig) { ...initConfig, plugins: [ defra.mapStylesPlugin({ - mapStyles: [ - { - id: 'outdoor', - label: 'Outdoor', - url: data.VTS_OUTDOOR_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/outdoor-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}`, - backgroundColor: '#f5f5f0' - }, - { - id: 'dark', - label: 'Dark', - url: data.VTS_DARK_URL, - mapColorScheme: 'dark', - appColorScheme: 'dark', - thumbnail: `${assetPath}/interactive-map/assets/images/dark-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo-white.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` - }, - { - id: 'black-and-white', - label: 'Black/White', - url: data.VTS_BLACK_AND_WHITE_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/black-and-white-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo-black.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` - }, - { - id: 'aerial', - label: 'Aerial', - url: data.VTS_AERIAL_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/aerial-map-thumb.jpg`, - attribution: `Tiles ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community ${new Date().getFullYear()}` - } - ] + mapStyles: getMapStyles(data, assetPath) }), interactPlugin, defra.searchPlugin({ From 7a85318531cf69fb42eb5df062de96721477a61c Mon Sep 17 00:00:00 2001 From: David Stone Date: Mon, 20 Apr 2026 15:14:07 +0100 Subject: [PATCH 4/4] Revert "Sonar fixes (Reduce fn size)" This reverts commit 6a484aaa6eb4b0fbb5a652dc94f14021a38059d9. --- src/client/javascripts/map.js | 90 ++++++++++++++++------------------- 1 file changed, 40 insertions(+), 50 deletions(-) diff --git a/src/client/javascripts/map.js b/src/client/javascripts/map.js index 3d808eb84..014d055fa 100644 --- a/src/client/javascripts/map.js +++ b/src/client/javascripts/map.js @@ -252,55 +252,6 @@ export const transformGeocodeRequest = (request) => { return new Request(url.toString(), request.options) } -/** - * Gets the map styles for the interactive map style switcher plugin - * @param {TileData} data - the tile data config - * @param {string} assetPath - */ -function getMapStyles(data, assetPath) { - const logoAltText = 'Ordnance survey logo' - - return [ - { - id: 'outdoor', - label: 'Outdoor', - url: data.VTS_OUTDOOR_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/outdoor-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}`, - backgroundColor: '#f5f5f0' - }, - { - id: 'dark', - label: 'Dark', - url: data.VTS_DARK_URL, - mapColorScheme: 'dark', - appColorScheme: 'dark', - thumbnail: `${assetPath}/interactive-map/assets/images/dark-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo-white.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` - }, - { - id: 'black-and-white', - label: 'Black/White', - url: data.VTS_BLACK_AND_WHITE_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/black-and-white-map-thumb.jpg`, - logo: `${assetPath}/interactive-map/assets/images/os-logo-black.svg`, - logoAltText, - attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` - }, - { - id: 'aerial', - label: 'Aerial', - url: data.VTS_AERIAL_URL, - thumbnail: `${assetPath}/interactive-map/assets/images/aerial-map-thumb.jpg`, - attribution: `Tiles ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community ${new Date().getFullYear()}` - } - ] -} - /** * Create a Defra map instance * @param {string} mapId - the map id @@ -309,6 +260,7 @@ function getMapStyles(data, assetPath) { */ export function createMap(mapId, initConfig, mapsConfig) { const { assetPath, apiPath, data = defaultData } = mapsConfig + const logoAltText = 'Ordnance survey logo' // @ts-expect-error - Defra namespace currently comes from UMD support files const defra = window.defra @@ -336,7 +288,45 @@ export function createMap(mapId, initConfig, mapsConfig) { ...initConfig, plugins: [ defra.mapStylesPlugin({ - mapStyles: getMapStyles(data, assetPath) + mapStyles: [ + { + id: 'outdoor', + label: 'Outdoor', + url: data.VTS_OUTDOOR_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/outdoor-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}`, + backgroundColor: '#f5f5f0' + }, + { + id: 'dark', + label: 'Dark', + url: data.VTS_DARK_URL, + mapColorScheme: 'dark', + appColorScheme: 'dark', + thumbnail: `${assetPath}/interactive-map/assets/images/dark-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo-white.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` + }, + { + id: 'black-and-white', + label: 'Black/White', + url: data.VTS_BLACK_AND_WHITE_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/black-and-white-map-thumb.jpg`, + logo: `${assetPath}/interactive-map/assets/images/os-logo-black.svg`, + logoAltText, + attribution: `Contains OS data ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Crown copyright and database rights ${new Date().getFullYear()}` + }, + { + id: 'aerial', + label: 'Aerial', + url: data.VTS_AERIAL_URL, + thumbnail: `${assetPath}/interactive-map/assets/images/aerial-map-thumb.jpg`, + attribution: `Tiles ${String.fromCodePoint(COMPANY_SYMBOL_CODE)} Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community ${new Date().getFullYear()}` + } + ] }), interactPlugin, defra.searchPlugin({