Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solution to add alt text attribute to pop-ups with images for the Map Series StoryMap template. This assumes the layer with pop-up is in each web map within app
// this represents with "custom-scripts.js" file located within the "app" directory of appliation files
define(["dojo/topic"], function(topic) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/
// The application is ready
topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/
});
// After a map is loaded (when the map starts to render)
topic.subscribe("story-loaded-map", function(){
// webmap object
const webmap = app.map;
// map layers
const mapLayers = webmap._layers;
// bridge layer - set variable within loop of map layers object
// this represents the target layer present in each web map
// there is a component of the name the same in each web map;
// but there are also some numbers as part of the layer name in each web map
let bridgeLayer;
// loop over map layers object to extract bridge layer
for (const property in mapLayers) {
// set map layer variable on correct layer
if (property.includes('CountyBridgesCIP')) {
bridgeLayer = mapLayers[property];
}
}
// bind click event to bridge layer
bridgeLayer.on('click', function() {
// use setTimeout due to delay of click event and pop-up opening
setTimeout(
function() {
// starting alt text
const startingAltText = 'a view of a road bridge. The bridge is named ';
// name of bridge
const bridgeNameElement = document.querySelectorAll('div.esriPopupVisible div.mainSection > div.header')[0].innerHTML;
// alt text to assign to image
const altTextForImage = startingAltText.concat(bridgeNameElement);
// image element to add alt text to
const imageElement = document.querySelectorAll('div.esriPopupVisible div.esriViewPopup > div.mediaSection div.image img.esriPopupMediaImage')[0];
// set alt text
imageElement.setAttribute('alt', altTextForImage);
},
500
);
});
}); // end "story-loaded-map" topic
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment