Custom symbol - change asset for other symbols on the display on click

We created a custom symbol to display markers on google maps in PIVision.

 

This is based on AF Attributes within an element that provide Latitude, Longitude, name, value, ...

Clicking or hovering a marker will show a popup with some info or PI data about the marker.

 

We would like to also add the feature that clicking a marker would adjust other symbols on the display to the selected asset.

Basically as if the asset dropdown at the top was used to switch to a different asset but activated by clicking a marker.

 

We came across the following link on pisquare and tried to implement this, but this does not seem to work.

https://pisquare.osisoft.com/s/question/0D51I00004UHh6CSAT/create-a-custom-symbol-for-switching-assets-in-client-view-kiosk-hidetoolbar

 

Our current javascript code that is triggered when clicking a marker:

 

google.maps.event.addListener(marker, 'click', (function (marker) {
	return function () {		
		//to prevent opening multiple if they were toggled with the button
		if (!isInfoWindowOpen(infowindow)) {
			infowindow.setContent(infowindowContent);
			infowindow.open(scope.map, marker);
		}

		// attempt to update datasources of the other symbols on the display
		displayProvider.instance.Symbols.forEach(function(sym){
			if(sym.Name != scope.symbol.Name)
				{
				var i;				
				for(i=0; i < sym.DataSources.length; i++)
				{
					var source = sym.DataSources[i];
					var afElementPath = source.substring(0,source.lastIndexOf('|'));
					//marker.path is for example: "af:\\afserver\mydatabase\path\to\element\element1", the element linked to the marker.
					//afElementPath is the path of the element currently used by the non-googlemaps symbol	
					//replace the element path with the path to the asset selected on the map
					sym.DataSources[i] = source.replace(afElementPath,marker.path).split('?')[0]; 
				}
				displayProvider.toggleSymbolSelection(sym);
			}
		}); 
		//trigger update of the display => This does not seem to work
		scope.$root.$broadcast('refreshDataForChangedSymbols');
	}
})(marker));

 

While debugging, we can see that the datasources of the other symbols are actually modified. However, the label and value of the other symbols is not updated to the last clicked asset.

It seems to partially work but not correctly.

 

For example, if you click a marker (symbols on display not updated) and then select a different asset from the dropdownlist on top, the display suddenly switches to the asset that was clicked on the map previously instead of the newly selected asset.

This seems to indicate that the trigger to update the display is somehow not working. There might be other side effects with the current implementation.

 

 

Perhaps there is a way to trigger this method in PIPC\PIVision\Scripts\app\editor\displayPIVisualization.asset-context-provider.js ?

function swapAssets(path) {     
	if (displayProvider.contextSwapSource === 'search') {
		this.selectedAsset = path;
		var params = displayProvider.contextSwapAction === 'root' ? { rootpath: path } : { asset: path };
		$rootScope.$broadcast('updateDisplayContext', params); // swap using search params or fall back
	} else {
		if (selectedAsset) {
			swapAssetsInCache(selectedAsset, path);
		}
		$rootScope.$broadcast('setBusyIndicator');
		triggerSwapAsset.raise(selectedAsset, path);
		this.selectedAsset = path;
		$rootScope.$broadcast('refreshDataForAllSymbols');
	}
	$rootScope.$broadcast('closeConfigPane');
	// Notify event search on next update
	timeProvider.notifyOnNextUpdate(true, true);
}

Attached, you will find a screenshot with some explanation.