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 343dcda commit 2f79c63
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 93 deletions.
195 changes: 132 additions & 63 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 @@ -123,75 +123,106 @@ <h4 id="HMap1">OSDP Integration</h4>
</li>
<li>
<button id="changeLanguage" style="margin: 10px">Change Language</button>
Changes the language from french to english or english to french and reloads the map if it exists. Note: this will change the
names of the layers, as maintainGeocoreLayerNames is set to false. In this case, we will lose any custom names, and they will
have to be reinserted (in the new language). If set to true, the layer names will remain as they were.
<input type="checkbox" id="keepNames" checked/>
<label for="keepNames">Keep names as they are</label>
<br>
Changes the language from french to english or english to french and reloads the map if it exists.
Note: The checkbox determines if the layer names are kept as is, or replaced with the names from the service (in the new language).
<details>
<summary>Code</summary>
<pre>
lang = lang === 'fr' ? 'en' : 'fr';
const mapDiv = document.getElementById('Map1');
if (mapDiv) {
mapDiv.setAttribute('data-lang', lang);
cgpv.api.maps.Map1.reloadWithCurrentState(false);
cgpv.api.maps.Map1.reloadWithCurrentState();
}
</pre>
</details>
</li>
</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 @@ -331,7 +362,7 @@ <h4 id="HMap1">OSDP Integration</h4>
const mapDiv = document.getElementById('Map1');
if (mapDiv) {
mapDiv.setAttribute('data-lang', lang);
cgpv.api.maps.Map1.reloadWithCurrentState(false);
cgpv.api.maps.Map1.reloadWithCurrentState(document.getElementById('keepNames').value === 'on');
}
});

Expand All @@ -347,22 +378,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 +430,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 +467,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 +509,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
Loading

0 comments on commit 2f79c63

Please sign in to comment.