Skip to content

Commit

Permalink
Introduction of 4 distinct callbacks for cgpv. To better distinguish …
Browse files Browse the repository at this point in the history 
…when it's possible to start listening to events

Minor ESLint fixes elsewhere
  • Loading branch information
@Alex-NRCan
Alex-NRCan committed Oct 11, 2024
1 parent d07aff8 commit 2e223fb
Show file tree
Hide file tree
Showing 6 changed files with 226 additions and 102 deletions.
177 changes: 116 additions & 61 deletions packages/geoview-core/public/templates/demos/demo-function-event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,11 +203,49 @@ <h3>Events that will generate notifications:</h3>
<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(async (mapId) => {
listenToLegendLayerSetChanges('HMap1-state', 'Map1');
const LYR_PATH_UNIQUE = "uniqueValueId/1";
const LYR_PATH_NON_METAL = "nonmetalmines/5";
const LYR_PATH_FEATURE = "esriFeatureLYR5/0";
const LYR_PATH_GEOCORE = "f4c51eaa-a6ca-48b9-a1fc-b0651da20509";

// Register a handler when the map is init
cgpv.onMapInit((mapId) => {
// !!
// GV This callback is executed when map is init, but map isn't ready nor layers registered
// !!

listenToLegendLayerSetChanges('HMap1-state', 'Map1');

// listen to map language changed event
cgpv.api.maps.Map1.onMapLanguageChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Map language changed to ${payload.language}`);
});

// listen to basemap changed event
cgpv.api.maps.Map1.basemap.onBasemapChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Basemap changed to ${payload.basemap.basemapId}`);
});

// listen to layer reordered event
cgpv.api.maps.Map1.stateApi.onLayersReordered((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Layers reordered to ${payload.orderedLayers.map((layer) => layer.layerPath)}`);
});

// listen to map added to div event
cgpv.api.onMapAddedToDiv((sender, payload) => {
cgpv.api.maps[payload.mapId].notifications.addNotificationSuccess(`Map ${payload.mapId} added`);
});

// 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]}`);
});

// Events=====================================================================================================================
// listen to layer added event
cgpv.api.maps.Map1.layer.onLayerAdded((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(payload.layer.geoviewLayerId + ' added');
Expand All @@ -220,31 +258,15 @@ <h3>Events that will generate notifications:</h3>

// listen to layer error events
cgpv.api.maps.Map1.layer.onLayerError((sender, payload) => {
// NOTE: The event added layer will be trigger first as the layer, even in error, has been added to ui
// NOTE: The event added layer will be trigger first as the layer, even in error, has been added to ui
cgpv.api.maps.Map1.notifications.addNotificationError(payload.layerPath + ' error');
});

// listen to individual layer loaded event
cgpv.api.maps.Map1.layer.getGeoviewLayer('nonmetalmines/5').onIndividualLayerLoaded((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess('Nonmetal mines has finished loading');
console.log(sender.olRootLayer.getSource().getFeatures());
});

// 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 (individual geoview layer)
cgpv.api.maps.Map1.layer.getGeoviewLayer('uniqueValueId/1').onVisibleChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`uniqueValueId/1 visibility set to ${payload.visible} - individual`);
});

// listen to layer visibility changed event (individual geoview layer)
cgpv.api.maps.Map1.layer.getGeoviewLayer('f4c51eaa-a6ca-48b9-a1fc-b0651da20509').onVisibleChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`layer ${payload.layerPath} visibility set to ${payload.visible} - individual`);
});

// listen to layer item visibility changed event (any layers)
cgpv.api.maps.Map1.layer.onLayerVisibilityToggled((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`layer ${payload.layerPath} visibility set to ${payload.visibility} - global`);
Expand All @@ -255,51 +277,84 @@ <h3>Events that will generate notifications:</h3>
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.itemName} on layer ${payload.layerPath} visibility set to ${payload.visibility} - global`);
});

// listen to map zoom event
cgpv.api.maps.Map1.onMapZoomEnd((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Zoomed to level ${payload.zoom}`);
});
// Add more registrations of listeners when the map has been initialized here...

// 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]}`);
});
});

// Register a handler when the map is ready
cgpv.onMapReady((mapId) => {
// !!
// GV This callback is executed when map is ready / layers registered, but layers aren't necessarily processed
// !!

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

// listen to layer filter applied event
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid('uniqueValueId/1').onLayerFilterApplied((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Filter ${payload.filter} applied to ${payload.layerPath}`);
cgpv.api.maps.Map1.layer.getLayerEntryConfig(LYR_PATH_GEOCORE)?.onLayerStatusChanged((sender, payload) => {
// debugger;
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${LYR_PATH_GEOCORE} status changed to ${payload.layerStatus}`);
});

// listen to map language changed event
cgpv.api.maps.Map1.onMapLanguageChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Map language changed to ${payload.language}`);
// listen to individual layer loaded event
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_NON_METAL)?.onIndividualLayerLoaded((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess('Nonmetal mines has finished loading');
console.log(sender.olRootLayer.getSource().getFeatures());
});

// listen to basemap changed event
cgpv.api.maps.Map1.basemap.onBasemapChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Basemap changed to ${payload.basemap.basemapId}`);
// Add more registrations of listeners when the map is ready / layers registered here...

});

// Register a handler when the layers are init
cgpv.onLayersProcessed((mapId) => {
// !!
// GV This callback is executed when map is init, but layers aren't necessarily loaded
// !!

// Add more registrations of listeners when the layers have been processed here...

});

// Register a handler when the layers are loaded
cgpv.onLayersLoaded((mapId) => {
// !!
// GV This callback is executed when all layers are loaded
// !!

// listen to layer visibility changed event (individual geoview layer)
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onVisibleChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${LYR_PATH_UNIQUE} visibility set to ${payload.visible} - individual`);
});

// listen to layer reordered event
cgpv.api.maps.Map1.stateApi.onLayersReordered((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Layers reordered to ${payload.orderedLayers.map((layer) => layer.layerPath)}`);
// listen to layer visibility changed event (individual geoview layer)
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_GEOCORE)?.onVisibleChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`layer ${payload.layerPath} visibility set to ${payload.visible} - individual`);
});

// listen to layer opacity changed event
cgpv.api.maps.Map1.layer.getGeoviewLayer('uniqueValueId/1').onLayerOpacityChanged((sender, payload) => {
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onLayerOpacityChanged((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`${payload.layerPath} opacity changed to ${payload.opacity}`);
});

// listen to map added to div event
cgpv.api.onMapAddedToDiv((sender, payload) => {
cgpv.api.maps[payload.mapId].notifications.addNotificationSuccess(`Map ${payload.mapId} added`);
// listen to layer filter applied event
cgpv.api.maps.Map1.layer.getGeoviewLayerHybrid(LYR_PATH_UNIQUE)?.onLayerFilterApplied((sender, payload) => {
cgpv.api.maps.Map1.notifications.addNotificationSuccess(`Filter ${payload.filter} applied to ${payload.layerPath}`);
});
})

// Add more registrations of listeners when the layers have been loaded here...
});

// Initialize cgpv
cgpv.init(async (mapId) => {
// Obsolete callback
// debugger;
}, () => {
// Obsolete callback
// debugger;
});

// Add WMS Button======================================================================================================
// find the button element by ID
var addLayerButton = document.getElementById('Add-layer');
Expand Down Expand Up @@ -365,7 +420,7 @@ <h3>Events that will generate notifications:</h3>

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

// Set All Visible Button=====================================================================================================
Expand All @@ -392,7 +447,7 @@ <h3>Events that will generate notifications:</h3>

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

// Place Marker Button========================================================================================================
Expand Down Expand Up @@ -475,7 +530,7 @@ <h3>Events that will generate notifications:</h3>

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

// Enable hover Button========================================================================================================
Expand All @@ -484,7 +539,7 @@ <h3>Events that will generate notifications:</h3>

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

// Disable feature info Button=================================================================================================
Expand All @@ -493,7 +548,7 @@ <h3>Events that will generate notifications:</h3>

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

// Enable feature info Button==================================================================================================
Expand All @@ -502,7 +557,7 @@ <h3>Events that will generate notifications:</h3>

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

// Enable show collapsed state Button==========================================================================================
Expand All @@ -511,7 +566,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
showCollapsedStateButton.addEventListener('click', async () => {
console.log(cgpv.api.maps.Map1.stateApi.getLegendCollapsedState('uniqueValueId/1'))
console.log(cgpv.api.maps.Map1.stateApi.getLegendCollapsedState(LYR_PATH_UNIQUE))
});

// Enable toggle collapse state Button==========================================================================================
Expand All @@ -520,7 +575,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
toggleCollapseButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.stateApi.setLegendCollapsedState('uniqueValueId/1')
cgpv.api.maps.Map1.stateApi.setLegendCollapsedState(LYR_PATH_UNIQUE)
});

// Enable show layer info Button================================================================================================
Expand Down Expand Up @@ -568,7 +623,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
setLayerButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.stateApi.setSelectedLayersTabLayer('nonmetalmines/5');
cgpv.api.maps.Map1.stateApi.setSelectedLayersTabLayer(LYR_PATH_NON_METAL);
});

// Swiper add Button================================================================================================
Expand All @@ -577,7 +632,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
swiperAddButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.plugins['swiper'].activateForLayer('nonmetalmines/5');
cgpv.api.maps.Map1.plugins['swiper'].activateForLayer(LYR_PATH_NON_METAL);
});

// Swiper remove Button================================================================================================
Expand All @@ -586,7 +641,7 @@ <h3>Events that will generate notifications:</h3>

// add an event listener when a button is clicked
swiperRemoveButton.addEventListener('click', async () => {
cgpv.api.maps.Map1.plugins['swiper'].deActivateForLayer('nonmetalmines/5');
cgpv.api.maps.Map1.plugins['swiper'].deActivateForLayer(LYR_PATH_NON_METAL);
});

// Calculate distance Button================================================================================================
Expand Down Expand Up @@ -682,7 +737,7 @@ <h3>Events that will generate notifications:</h3>
zoomToMarkerGroupButton.addEventListener('click', () => {
cgpv.api.maps.Map1.layer.featureHighlight.pointMarkers.zoomToPointMarkerGroup('group1');
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
Expand Down
Loading

0 comments on commit 2e223fb

Please sign in to comment.