Share via

Azure Maps Popup iframe error

Aakash 60 Reputation points
2023-06-19T17:57:08.8233333+00:00

Hello,

I'm loading certain map files onto azure maps and displaying their popup upon click on the feature polygon using azure atlas.Popup class. However, to avoid displaying multiple popups whenever more than one layer is applied to map (WMS, WMTS or kml, kmz, geojson etc ), I wrote a custom script to display the popup of only a specific layer at a time. Here is a short implementation of it:

function displayPopup(layersClicked){
	// layersClicked is a list of dictionary [{layerName: '...', coordinate: '...'}]
	// availablePopups is a dictionary where the value is the popup object which has already called setOptions with appropriate content on map.events.addEventListener('click', layer, func) 
	if (layersClicked.length === 1){
		let fileName = layersClicked[0]["layerName"]
		// popup is a global reusable popup variable that we overwrite
		popup = availablePopups[fileName]
		popup.open(map);
	}
	else{
		var optionsPopup = new atlas.Popup({pixelOffset: [0, -20], closeButton: true, draggable: true});
		let customContent = {}
		for (element of layersClicked){
			for (let key of Object.keys(element)){
				if (key === 'layerName'){
					const link = document.createElement('a'); 					
					link.id = "test"; 					
					link.textContent = 'Show Features'; 					
					link.href = '#';
					link.addEventListener('click', function() {
						popup = availablePopups[layerName]
						popup.open(map);
					})
					customContent[element['layerName']] = link.outerHTML;
				}
			}
		}
		optionsPopup.setOptions({content: atlas.PopupTemplate.applyTemplate(customContent),
								position: layersClicked[0]['coordinate']}); 	
	}
}

For map with only one layer, there seems to be no issue and the popup is shown correctly. I noticed that when multiple layers are rendered on the map and clicking on show feature for specific layer name, I am given the following error: Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. This error occurs 42 times for some reason and expanding it has the following error repeated 42 times: Blocked script execution in 'https://localhost:44356/Account/Login?ReturnUrl=%2FMap_Page' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.*

I tried to update the sandbox property (as the popup is an iframe) by the following code after the popup is opened giving users option to open specific layer popup:

var gisIframe = document.querySelector('iframe'); 		
gisIframe.setAttribute('sandbox',  "allow-same-origin allow-top-navigation allow-pointer-lock allow popups allow-forms allow-scripts");

However it appears that clicking on Show Features button doesn't even trigger the eventListener and instead I get the same error. I notice that in the second popup opened after clicking Show Features, I get a small iframe-window which is the home login page of my website. I am not sure why it's redirecting it to the home page.. I tried on Firefox and on Chrome by disabling CORs and I now get some theme errors and same home screen issue on the 2nd opened popup iframe as discussed above. I've attached a screenshot from the console for your convenience.

I'd really appreciate some help on this!

Thank you

Best,

Aakash

themesCors.png

Azure
Azure

A cloud computing platform and infrastructure for building, deploying and managing applications and services through a worldwide network of Microsoft-managed datacenters.

Azure Maps
Azure Maps

An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.

{count} votes

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.