Skip to content

Commit

Permalink
feat(utility): Functions added for OSDP
Browse files Browse the repository at this point in the history 
Closes #2114
  • Loading branch information
@DamonU2
DamonU2 committed May 28, 2024
1 parent cd2cb44 commit f585844
Show file tree
Hide file tree
Showing 26 changed files with 1,263 additions and 300 deletions.
2 changes: 2 additions & 0 deletions packages/geoview-core/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,12 @@ <h4>Interactions</h4>

<h4>Demos</h4>
<a class="page-link" href="./demos.html">Specific Demos Pages</a>
<a class="page-link" href="./demo-function-event.html">API Function and Event Demo</a>

<h4>Other</h4>
<a class="page-link" href="./load-test.html">Performance Test</a>
<a class="page-link" href="./outliers.html">Outlier Layers</a>
<br />
</div>
</body>
</html>
315 changes: 315 additions & 0 deletions packages/geoview-core/public/templates/demos/demo-function-event.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,315 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="./img/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="header-table">
<table>
<tbody>
<tr>
<td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
<td class="header-title">
<h1><strong>API Functions and Events</strong></h1>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<a href="./index.html">Main</a><br />
</td>
</tr>
<tr>
<td><p>This page is used to test functions and events</p></td>
</tr>
</tr>
<tr>
<td>
<a href="#HMap1">1. Basic Map</a><br />
</td>
</tr>
</tbody>
</table>
</div>

<div class="map-title-holder">
<h4 id="HMap1">1. Basic Map</h4>
<a class="ref-link" href="#top">Top</a>
</div>
<button class="collapsible active">Map Status Flags</button>
<pre id="HMap1-state" class="panel map-title-holder"></pre>
<hr />
<div
id="Map1"
class="geoview-map"
data-lang="en"
data-config-url="./configs/navigator/06-basic-footer.json"
></div>
<hr />
<div>
<h3>API Functions</h3>
<ul>
<li><button id="Add-layer">Add WMS layer</button><br />
cgpv.api.maps.Map1.layer.addGeoviewLayer(config)
</li>
<li><button id="Remove-layer">Remove GeoJSON layer</button><br />
cgpv.api.maps.Map1.layer.removeLayerUsingPath('geojsonLYR1/geojsonLYR1')
</li>
<li><button id="Remove-all-layers">Remove All layers</button><br />
cgpv.api.maps.Map1.layer.removeAllGeoviewLayers()
</li>
<li><button id="Toggle-visibility">Toggle Top 100 visibility</button><br />
cgpv.api.maps.Map1.layer.setOrToggleLayerVisibility('esriFeatureLYR5/0')
</li>
<li><button id="Set-all-visible">Set all layers visible</button><br />
cgpv.api.maps.Map1.layer.setAllLayersVisibility(true)
</li>
<li><button id="Set-all-not-visible">Set all layers not visible</button><br />
cgpv.api.maps.Map1.layer.setAllLayersVisibility(false)
</li>
<li><button id="Rename-layer">Rename Water Quantity layer</button><br />
cgpv.api.maps.Map1.layer.setLayerName('Water Quantity', 'uniqueValueId/1')
</li>
<li><button id="Place-marker">Place a marker on map</button><br />
cgpv.api.maps.Map1.clickMarkerIconShow({lnglat: [-90, 60]})
</li>
<li><button id="Zoom-extent">Zoom to an extent</button><br />
cgpv.api.maps.Map1.zoomToLngLatExtentOrCoordinate([-87.77486341686723, 51.62285357468582, -84.57727128084842, 53.833354975551075])
</li>
<li><button id="Zoom-coordinate">Zoom to a coordinate</button><br />
cgpv.api.maps.Map1.zoomToLngLatExtentOrCoordinate([-90, 60])
</li>
<li><button id="Extent-to-polygon">Convert an extent to a polygon (result in console)</button><br />
cgpv.api.utilities.geo.extentToPolygon([-87.77486341686723, 51.62285357468582, -84.57727128084842, 53.83335497555107])
</li>
<li><button id="Polygon-to-extent">Convert a polygon to an extent (result in console)</button><br />
cgpv.api.utilities.geo.polygonToExtent(polygon)
</li>
<li><button id="Redefine-alias-fields">Redefine alias fields for polygons layer</button><br />
cgpv.api.maps.Map1.layer.redefineFeatureFields('geojsonLYR1/geojsonLYR1/polygons.json', 'Location Province,Date Created,Images', 'aliasFields')
</li>
</ul>
<h3>Events that will generate notifications:</h3>
<p>onLayerAdded, onLayerRemoved, onLayerVisibilityToggled, onMapZoomEnd, onMapMoveEnd, onLayerStatusChanged for uniqueValueId/1, onLayerFilterApplied for uniqueValueId/1</p>
</div>

<script src="codedoc.js"></script>
<script src="layerlib.js"></script>
<script>
// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
cgpv.init((mapId) => {
listenToLegendLayerSetChanges('HMap1-state', 'Map1');

// Events=====================================================================================================================
// listen to layer added event
cgpv.api.maps.Map1.layer.onLayerAdded((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(payload.layer.geoviewLayerId + ' added');
});

// listen to layer removed event
cgpv.api.maps.Map1.layer.onLayerRemoved((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(payload.layerPath + ' removed');
});

// listen to layer visibility changed event
cgpv.api.maps.Map1.layer.onLayerVisibilityToggled((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.layerPath} visibility set to ${payload.visibility}`);
});

// listen to layer item visibility changed event
cgpv.api.maps.Map1.layer.onLayerItemVisibilityToggled((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.itemName} on layer ${payload.layerPath} visibility set to ${payload.visibility}`);
});

// listen to map zoom event
cgpv.api.maps.Map1.onMapZoomEnd((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Zoomed to level ${payload.zoom}`);
});

// listen to map move event
cgpv.api.maps.Map1.onMapMoveEnd((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Map moved to center latitude ${payload.lnglat[1]} and longitude ${payload.lnglat[0]}`);
});

// listen to layer status change event
cgpv.api.maps.Map1.layer.registeredLayers['uniqueValueId/1'].onLayerStatusChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`uniqueValueId/1 status changed to ${payload.layerStatus}`);
});

// listen to layer status change event
cgpv.api.maps.Map1.layer.registeredLayers['uniqueValueId/1'].onLayerFilterApplied((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Filter ${payload.filter} applied to ${payload.layerPath} `);
});

});

// Add WMS Button======================================================================================================
// find the button element by ID
var addLayerButton = document.getElementById('Add-layer');
const config =
{
'geoviewLayerId': 'wmsLYR1-msi',
'geoviewLayerName': { 'en': 'MSI' },
'metadataAccessPath': { 'en': 'https://datacube.services.geo.ca/ows/msi' },
'geoviewLayerType': 'ogcWms',
'listOfLayerEntryConfig': [
{
'layerId': 'msi-94-or-more',
'layerName': { 'en': 'Permanent Snow' },
'source': {
'style': 'msi-binary',
'featureInfo': {
'queryable': true,
'nameField': { 'en': 'band-0-pixel-value', 'fr': 'band-0-pixel-value' },
'fieldTypes': 'number',
'outfields': { 'en': 'band-0-pixel-value', 'fr': 'band-0-pixel-value' },
'aliasFields': { 'en': 'Pixel value', 'fr': 'Valeur du pixel' }
}
}
}
]
}

// add an event listener when a button is clicked
addLayerButton.addEventListener('click', async () => {
const wmsLayerAlreadyExists = Object.keys(cgpv.api.maps.Map1.layer.registeredLayers).includes('wmsLYR1-msi/msi-94-or-more');
if (!wmsLayerAlreadyExists) cgpv.api.maps.Map1.layer.addGeoviewLayer(config);
else console.log('WMS layer already exists');
});

// Remove GeoJSON Button======================================================================================================
// find the button element by ID
var removeLayerButton = document.getElementById('Remove-layer');

// add an event listener when a button is clicked
removeLayerButton.addEventListener('click', async () => {
const geojsonLayerAlreadyExists = Object.keys(cgpv.api.maps.Map1.layer.registeredLayers).includes('geojsonLYR1/geojsonLYR1');
if (geojsonLayerAlreadyExists) cgpv.api.maps.Map1.layer.removeLayerUsingPath('geojsonLYR1/geojsonLYR1');
else console.log('GeoJSON layer does not exist');
});

// Remove All Button==========================================================================================================
// find the button element by ID
var removeAllLayersButton = document.getElementById('Remove-all-layers');

// add an event listener when a button is clicked
removeAllLayersButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.removeAllGeoviewLayers();
});

// Toggle Visibility Button===================================================================================================
// find the button element by ID
var toggleVisibilityButton = document.getElementById('Toggle-visibility');

// add an event listener when a button is clicked
toggleVisibilityButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.setOrToggleLayerVisibility('esriFeatureLYR5/0');
});

// Set All Visible Button=====================================================================================================
// find the button element by ID
var setAllVisibleButton = document.getElementById('Set-all-visible');

// add an event listener when a button is clicked
setAllVisibleButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.setAllLayersVisibility(true);
});

// Set All Not Visible Button=================================================================================================
// find the button element by ID
var setAllNotVisibleButton = document.getElementById('Set-all-not-visible');

// add an event listener when a button is clicked
setAllNotVisibleButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.setAllLayersVisibility(false);
});

// Rename Layer Button========================================================================================================
// find the button element by ID
var renameLayerButton = document.getElementById('Rename-layer');

// add an event listener when a button is clicked
renameLayerButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.setLayerName('Water Quantity', 'uniqueValueId/1')
});

// Place Marker Button========================================================================================================
// find the button element by ID
var placeMarkerButton = document.getElementById('Place-marker');

// add an event listener when a button is clicked
placeMarkerButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.clickMarkerIconShow({lnglat: [-90, 60]});
});

// Zoom to Extent Button========================================================================================================
// find the button element by ID
var zoomExtentButton = document.getElementById('Zoom-extent');

// add an event listener when a button is clicked
zoomExtentButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.zoomToLngLatExtentOrCoordinate([-87.77486341686723, 51.62285357468582, -84.57727128084842, 53.833354975551075]);
});

// Zoom to Coordinate Button========================================================================================================
// find the button element by ID
var zoomCoordinateButton = document.getElementById('Zoom-coordinate');

// add an event listener when a button is clicked
zoomCoordinateButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.zoomToLngLatExtentOrCoordinate([-90, 60]);
});

// Extent to Polygon Button========================================================================================================
// find the button element by ID
var extentToPolygonButton = document.getElementById('Extent-to-polygon');

// add an event listener when a button is clicked
extentToPolygonButton.addEventListener('click', async () => {
console.log(cgpv.api.utilities.geo.extentToPolygon([-87.77486341686723, 51.62285357468582, -84.57727128084842, 53.833354975551075]));
});

// Polygon to Extent Button========================================================================================================
// find the button element by ID
var polygonToExtentButton = document.getElementById('Polygon-to-extent');

const polygon = cgpv.api.utilities.geo.extentToPolygon([-87.77486341686723, 51.62285357468582, -84.57727128084842, 53.833354975551075]);

// add an event listener when a button is clicked
polygonToExtentButton.addEventListener('click', async () => {
console.log(cgpv.api.utilities.geo.polygonToExtent(polygon));
});

// Redefine alias fields Button========================================================================================================
// find the button element by ID
var redefineAliasFieldsButton = document.getElementById('Redefine-alias-fields');

// add an event listener when a button is clicked
redefineAliasFieldsButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.layer.redefineFeatureFields('geojsonLYR1/geojsonLYR1/polygons.json', 'Location Province,Date Created,Images', 'aliasFields')
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
createConfigSnippet();
});

</script>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/geoview-core/public/templates/layers/geojson.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ <h4 id="HLYR1">1. Many GeoJSON Layers</h4>
removeGeoJSONButton.addEventListener('click', function (e) {
// removing a geojson layer using the ID
const layerPath = document.getElementById('new-layer-id-label').innerText;
if (layerPath) cgpv.api.maps['LYR1'].layer.removeLayersUsingPath(layerPath);
if (layerPath) cgpv.api.maps['LYR1'].layer.removeLayerUsingPath(layerPath);
document.getElementById('new-layer-id-label').innerText = '';
createTableOfFilter('LYR1');
});
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/public/templates/pygeoapi-processes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ <h4 id="HLYR5">GeoJSON Layer</h4>
// add an event listener when a button is clicked
addGeoJSONButton.addEventListener('click', async () => {
const layerPath = document.getElementById('GeoMet-New-Layer-Id-Label').innerText;
if (layerPath) cgpv.api.maps['LYR5'].layer.removeLayersUsingPath(layerPath);
if (layerPath) cgpv.api.maps['LYR5'].layer.removeLayerUsingPath(layerPath);
document.getElementById('GeoMet-New-Layer-Id-Label').innerText = '';
createTableOfFilter('LYR5');

Expand Down Expand Up @@ -210,7 +210,7 @@ <h4 id="HLYR5">GeoJSON Layer</h4>
// add an event listener when a button is clicked
addGeoJSONButton.addEventListener('click', async () => {
const layerPath = document.getElementById('Hydro-New-Layer-Id-Label').innerText;
if (layerPath) cgpv.api.maps['LYR5'].layer.removeLayersUsingPath(layerPath);
if (layerPath) cgpv.api.maps['LYR5'].layer.removeLayerUsingPath(layerPath);
document.getElementById('Hydro-New-Layer-Id-Label').innerText = '';
createTableOfFilter('LYR5');

Expand Down
Loading

0 comments on commit f585844

Please sign in to comment.