Skip to content

Commit

Permalink
feat(names): function added to replace layer names
Browse files Browse the repository at this point in the history 
Closes Canadian-Geospatial-Platform#2724
  • Loading branch information
@DamonU2
DamonU2 committed Feb 4, 2025
1 parent f6c3acc commit 7bf6b34
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 86 deletions.
183 changes: 125 additions & 58 deletions packages/geoview-core/public/templates/demos/demo-osdp-integration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,57 +141,86 @@ <h4 id="HMap1">OSDP Integration</h4>
</ul>
</div>

<div class="selector">
<textarea id="layerUuids" cols="40" rows="5">
21b821cf-0f1c-40ee-8925-eab12d357668,ccc75c12-5acc-4a6a-959f-ef6f621147b9,0fca08b5-e9d0-414b-a3c4-092ff9c5e326</textarea
>
<ul>
<li>
<button id="addLayers" style="margin: 10px">Add Layers</button>
Add entered Geocore UUID's to the map. Can be separated with commas or each on a new line
<details>
<summary>Code</summary>
<pre>
if (document.getElementById('Map1')) {
const layerUuids = document.getElementById('layerUuids').value;
const uuidList = layerUuids.split('\n').join(',').split(',');
addLayers(uuidList);
}
<ul>
<li>
<textarea id="layerUuids" cols="40" rows="5">21b821cf-0f1c-40ee-8925-eab12d357668,ccc75c12-5acc-4a6a-959f-ef6f621147b9,0fca08b5-e9d0-414b-a3c4-092ff9c5e326</textarea>
<br>
<button id="addLayers" style="margin: 10px">Add Layers</button>
Add entered Geocore UUID's to the map. Can be separated with commas or each on a new line
<details>
<summary>Code</summary>
<pre>
if (document.getElementById('Map1')) {
const layerUuids = document.getElementById('layerUuids').value;
const uuidList = layerUuids.split('\n').join(',').split(',');
addLayers(uuidList);
}

function addLayers(layers) {
layers.forEach((layer) => {
cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layer);
});
}
</pre>
</details>
</li>
<li>
<textarea id="layerNames" cols="100" rows="4">[Radioactivité de l'air, Radioactivity], [Périmètre de localisation des stations, Perimeter], [Carte commémorative du Canada, Commemorative Map]</textarea>
<br>
<button id="changeNames" style="margin: 10px">Change Names</button>
Creates and updates a map config, replacing some of the default layer names (from above) and refreshes the map.
Note: This will replace any layer name from the array with its partner, the order that the pairs are in, and the order of the names in the pair do not matter.
<details>
<summary>Code</summary>
<pre>
const pairs = [["Radioactivité de l'air", 'Radioactivity'], ['Périmètre de localisation des stations', 'Perimeter'], ['Carte commémorative du Canada', 'Commemorative Map']];
const mapConfig = cgpv.api.maps.Map1.createMapConfigFromMapState();
cgpv.api.maps.Map1.replaceMapConfigLayerNames(pairs, mapConfig);
refreshMap();
</pre>
</details>
</li>
</ul>

function addLayers(layers) {
layers.forEach((layer) => {
cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layer);
});
}
</pre>
</details>
</li>
</ul>

<div class="selector">
<select name="Selecty custom config" id="switchCustom">
<option value="Airborne Radioactivity">Airborne Radioactivity</option>
<option value="IAAC">IAAC</option>
<option value="CESI">CESI</option>
</select>
</div>
<div style="display: grid">
<input id="layerUuidCustom" style="margin-top: 10px; margin-bottom: 10px; width: 300px" />
<textarea id="layerUuidCustomEntries" cols="80" rows="25"></textarea>
</div>
<ul>
<li>
<button id="addLayersCustom" style="margin: 10px">Add Layers</button>
Add entered Geocore UUID's to the map with a custom configuration (List of layer entries)
<details>
<summary>Code</summary>
<pre>
cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(uuid, customListOfLayerEntries);
</pre>
</details>
</li>
</ul>
<div class="selector">
<select name="Selecty custom config" id="switchCustom">
<option value="Airborne Radioactivity">Airborne Radioactivity</option>
<option value="IAAC">IAAC</option>
<option value="CESI">CESI</option>
</select>
</div>
<div style="display: grid">
<input id="layerUuidCustom" style="margin-top: 10px; margin-bottom: 10px; width: 300px" />
<textarea id="layerUuidCustomEntries" cols="80" rows="25"></textarea>
</div>
<ul>
<li>
<button id="addLayersCustom" style="margin: 10px">Add Layers</button>
Add entered Geocore UUID's to the map with a custom configuration (List of layer entries)
<details>
<summary>Code</summary>
<pre>
cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(uuid, customListOfLayerEntries);
</pre>
</details>
</li>
<li>
<textarea id="customLayerNames" cols="100" rows="4"></textarea>
<br>
<button id="changeNamesCustom" style="margin: 10px">Change Names</button>
Creates and updates a map config, replacing some of the layer names (from above) and refreshes the map.
Note: This will replace any layer name from the array with its partner, the order that the pairs are in, and the order of the names in the pair do not matter.
<details>
<summary>Code</summary>
<pre>
const pairs = [["Radioactivité de l'air", 'Radioactivity'], ['Périmètre de localisation des stations', 'Perimeter'], ['Carte commémorative du Canada', 'Commemorative Map']];
const mapConfig = cgpv.api.maps.Map1.createMapConfigFromMapState();
cgpv.api.maps.Map1.replaceMapConfigLayerNames(pairs, mapConfig);
refreshMap();
</pre>
</details>
</li>
</ul>

<script src="codedoc.js"></script>
<script>
Expand Down Expand Up @@ -347,22 +376,39 @@ <h4 id="HMap1">OSDP Integration</h4>
}
});

// Add Layers Custom Button============================================================================================================
const addLayersCustomButton = document.getElementById('addLayersCustom');
// Change Names Button============================================================================================================
const changeNamesButton = document.getElementById('changeNames');

// add an event listener when a button is clicked
addLayersCustomButton.addEventListener('click', function () {
if (document.getElementById('Map1')) {
const layerUuid = document.getElementById('layerUuidCustom').value;
const layerUuidEntries = document.getElementById('layerUuidCustomEntries').value;
changeNamesButton.addEventListener('click', function () {
const pairs = document.getElementById('layerNames').value.replace(/\[|\]/g,'').split(',').map((name) => name.trim()).reduce((result, value, index, array) => {
if (index % 2 === 0)
result.push(array.slice(index, index + 2));
return result;
}, []);
mapConfig = cgpv.api.maps.Map1.createMapConfigFromMapState();
cgpv.api.maps.Map1.replaceMapConfigLayerNames(pairs, mapConfig);
refreshMap();
});

if (layerUuidEntries === '') cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layerUuid);
else cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layerUuid, layerUuidEntries);
}
// Change Names Custom Button============================================================================================================
const changeNamesCustomButton = document.getElementById('changeNamesCustom');

// add an event listener when a button is clicked
changeNamesCustomButton.addEventListener('click', function () {
const pairs = document.getElementById('customLayerNames').value.replace(/\[|\]/g,'').split(',').map((name) => name.trim()).reduce((result, value, index, array) => {
if (index % 2 === 0)
result.push(array.slice(index, index + 2));
return result;
}, []);
mapConfig = cgpv.api.maps.Map1.createMapConfigFromMapState();
cgpv.api.maps.Map1.replaceMapConfigLayerNames(pairs, mapConfig);
refreshMap();
});

const uuidConfig = {
AirborneRadioactivity: '21b821cf-0f1c-40ee-8925-eab12d357668',
AirborneRadioactivityNames: "[Airborne Radioactivity - Feature Layer, Radioactivité de l'air]",
AirborneRadioactivityConfig: [
{
layerId: '0',
Expand All @@ -382,6 +428,7 @@ <h4 id="HMap1">OSDP Integration</h4>
},
],
IAAC: 'f4c51eaa-a6ca-48b9-a1fc-b0651da20509',
IAACNames: "[IAAC Projects, IAAC Group]",
IAACConfig: [
{
entryType: 'group',
Expand Down Expand Up @@ -418,6 +465,7 @@ <h4 id="HMap1">OSDP Integration</h4>
},
],
CESI: '5a65ad7c-561a-466a-8375-8d876624df9d',
CESINames: "[CESI - Water Quality Group, Water Quality Group]",
CESIConfig: [
{
layerId: '0',
Expand Down Expand Up @@ -459,19 +507,38 @@ <h4 id="HMap1">OSDP Integration</h4>
],
};


// Add Layers Custom Button============================================================================================================
const addLayersCustomButton = document.getElementById('addLayersCustom');

// add an event listener when a button is clicked
addLayersCustomButton.addEventListener('click', function () {
if (document.getElementById('Map1')) {
const layerUuid = document.getElementById('layerUuidCustom').value;
const layerUuidEntries = document.getElementById('layerUuidCustomEntries').value;

if (layerUuidEntries === '') cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layerUuid);
else cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layerUuid, layerUuidEntries);
}
});

// Add a samples selector
const layerUuid = document.getElementById('layerUuidCustom');
const layerUuidEntries = document.getElementById('layerUuidCustomEntries');
const customLayerNames = document.getElementById('customLayerNames');
layerUuid.value = uuidConfig['AirborneRadioactivity'];
layerUuidEntries.value = JSON.stringify(uuidConfig[`AirborneRadioactivityConfig`], null, 2);
customLayerNames.value = uuidConfig['AirborneRadioactivityNames'];

const switchCustom = document.getElementById('switchCustom');
switchCustom.addEventListener('change', (e) => {
const layerUuid = document.getElementById('layerUuidCustom');
const layerUuidEntries = document.getElementById('layerUuidCustomEntries');
const customLayerNames = document.getElementById('customLayerNames');

layerUuid.value = uuidConfig[e.target.value.replaceAll(' ', '')];
layerUuidEntries.value = JSON.stringify(uuidConfig[`${e.target.value.replaceAll(' ', '')}Config`], null, 2);
customLayerNames.value = uuidConfig[`${e.target.value.replaceAll(' ', '')}Names`];
});

// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
Expand Down
99 changes: 71 additions & 28 deletions ...ges/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1045,6 +1045,48 @@ export class MapEventProcessor extends AbstractEventProcessor {
this.getMapViewer(mapId).map.getOverlayById(`${mapId}-clickmarker`)!.setPosition(position);
};

/**
* Get all active filters for layer.
*
* @param {string} mapId The map id.
* @param {string} layerPath The path for the layer to get filters from.
*/
static getActiveVectorFilters(mapId: string, layerPath: string): (string | undefined)[] | undefined {
const geoviewLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath);
if (geoviewLayer) {
const initialFilter = this.getInitialFilter(mapId, layerPath);
const tableFilter = DataTableEventProcessor.getTableFilter(mapId, layerPath);
const sliderFilter = TimeSliderEventProcessor.getTimeSliderFilter(mapId, layerPath);
return [initialFilter, tableFilter, sliderFilter].filter((filter) => filter);
}
return undefined;
}

/**
* Apply all available filters to layer.
*
* @param {string} mapId The map id.
* @param {string} layerPath The path of the layer to apply filters to.
*/
static applyLayerFilters(mapId: string, layerPath: string): void {
const geoviewLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath);
if (geoviewLayer) {
if (geoviewLayer instanceof GVWMS || geoviewLayer instanceof GVEsriImage) {
const filter = TimeSliderEventProcessor.getTimeSliderFilter(mapId, layerPath);
if (filter) geoviewLayer.applyViewFilter(filter);
} else {
const filters = this.getActiveVectorFilters(mapId, layerPath) || [''];

// Force the layer to applyfilter so it refresh for layer class selection (esri layerDef) even if no other filter are applied.
(geoviewLayer as AbstractGVVector | GVEsriDynamic).applyViewFilter(filters.join(' and '));
}
}
}

// #endregion

// #region CONFIG FROM MAP STATE

/**
* Creates layer initial settings according to provided configs.
* @param {ConfigBaseClass} layerEntryConfig - Layer entry config for the layer.
Expand Down Expand Up @@ -1310,42 +1352,43 @@ export class MapEventProcessor extends AbstractEventProcessor {
}

/**
* Apply all available filters to layer.
* Searches through a map config and replaces any matching layer names with their provided partner.
*
* @param {string} mapId The map id.
* @param {string} layerPath The path of the layer to apply filters to.
* @param {string[][]} namePairs - The array of name pairs. Presumably one english and one french name in each pair.
* @param {TypeMapFeaturesInstance} mapConfig - The config to modify.
* @returns {TypeMapFeaturesInstance} Map config with updated names.
*/
static applyLayerFilters(mapId: string, layerPath: string): void {
const geoviewLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath);
if (geoviewLayer) {
if (geoviewLayer instanceof GVWMS || geoviewLayer instanceof GVEsriImage) {
const filter = TimeSliderEventProcessor.getTimeSliderFilter(mapId, layerPath);
if (filter) geoviewLayer.applyViewFilter(filter);
} else {
const filters = this.getActiveVectorFilters(mapId, layerPath) || [''];
static replaceMapConfigLayerNames(namePairs: string[][], mapConfig: TypeMapFeaturesInstance): TypeMapFeaturesInstance {
const pairsDict: Record<string, string> = {};
namePairs.forEach((pair) => {
[pairsDict[pair[1]], pairsDict[pair[0]]] = pair;
});

// Force the layer to applyfilter so it refresh for layer class selection (esri layerDef) even if no other filter are applied.
(geoviewLayer as AbstractGVVector | GVEsriDynamic).applyViewFilter(filters.join(' and '));
}
}
mapConfig.map.listOfGeoviewLayerConfig?.forEach((geoviewLayerConfig) => {
if (geoviewLayerConfig.geoviewLayerName && pairsDict[geoviewLayerConfig.geoviewLayerName])
// eslint-disable-next-line no-param-reassign
geoviewLayerConfig.geoviewLayerName = pairsDict[geoviewLayerConfig.geoviewLayerName];
if (geoviewLayerConfig.listOfLayerEntryConfig?.length)
this.#replaceLayerEntryConfigNames(pairsDict, geoviewLayerConfig.listOfLayerEntryConfig);
});

return mapConfig;
}

/**
* Get all active filters for layer.
* Searches through a list of layer entry configs and replaces any matching layer names with their provided partner.
*
* @param {string} mapId The map id.
* @param {string} layerPath The path for the layer to get filters from.
* @param {Record<string, string>} pairsDict - The dict of name pairs. Presumably one english and one french name in each pair.
* @param {TypeLayerEntryConfig[]} listOfLayerEntryConfigs - The layer entry configs to modify.
*/
static getActiveVectorFilters(mapId: string, layerPath: string): (string | undefined)[] | undefined {
const geoviewLayer = MapEventProcessor.getMapViewerLayerAPI(mapId).getGeoviewLayer(layerPath);
if (geoviewLayer) {
const initialFilter = this.getInitialFilter(mapId, layerPath);
const tableFilter = DataTableEventProcessor.getTableFilter(mapId, layerPath);
const sliderFilter = TimeSliderEventProcessor.getTimeSliderFilter(mapId, layerPath);
return [initialFilter, tableFilter, sliderFilter].filter((filter) => filter);
}
return undefined;
static #replaceLayerEntryConfigNames(pairsDict: Record<string, string>, listOfLayerEntryConfigs: TypeLayerEntryConfig[]): void {
listOfLayerEntryConfigs?.forEach((layerEntryConfig) => {
if (layerEntryConfig.layerName && pairsDict[layerEntryConfig.layerName])
// eslint-disable-next-line no-param-reassign
layerEntryConfig.layerName = pairsDict[layerEntryConfig.layerName];
if (layerEntryConfig.listOfLayerEntryConfig?.length)
this.#replaceLayerEntryConfigNames(pairsDict, layerEntryConfig.listOfLayerEntryConfig);
});
}

// #endregion
}
15 changes: 15 additions & 0 deletions packages/geoview-core/src/geo/map/map-viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1543,6 +1543,7 @@ export class MapViewer {
return extent;
}

// TODO: Move to config API after refactor?
/**
* Creates a map config based on current map state.
* @param {boolean} maintainGeocoreLayerNames - Indicates if geocore layer names should be kept as is or returned to defaults.
Expand All @@ -1553,6 +1554,20 @@ export class MapViewer {
return MapEventProcessor.createMapConfigFromMapState(this.mapId, maintainGeocoreLayerNames);
}

// TODO: Move to config API after refactor?
/**
* Searches through a map config and replaces any matching layer names with their provided partner.
*
* @param {string[][]} namePairs - The array of name pairs. Presumably one english and one french name in each pair.
* @param {TypeMapFeaturesInstance} mapConfig - The config to modify, or one created using the current map state if not provided.
* @returns {TypeMapFeaturesInstance} Map config with updated names.
*/
replaceMapConfigLayerNames(namePairs: string[][], mapConfig?: TypeMapFeaturesConfig): TypeMapFeaturesInstance | undefined {
const mapConfigToUse = mapConfig || this.createMapConfigFromMapState();
if (mapConfigToUse) return MapEventProcessor.replaceMapConfigLayerNames(namePairs, mapConfigToUse);
return undefined;
}

// #region EVENTS

/**
Expand Down

0 comments on commit 7bf6b34

Please sign in to comment.