Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (91 sloc) 4.51 KB
<!DOCTYPE html>
<title>Accessible popups - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to use popups in a way that users can easily access them using keyboard shortcuts or on mouse click." />
<meta name="keywords" content="map, gis, API, SDK, popups, infobox, infowindow, events, mouse, accessibility" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, popups = [], datasource;
var sampleLocationData = [
position: [-90, 45],
description: 'This is the first location.'
}, {
position: [90, 45],
description: 'This is the second location.'
}, {
position: [-90, -45],
description: 'This is the third location.'
}, {
position: [90, -45],
description: 'This is the fourth location.'
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//For each sample location, create a popup, store it in an array.
//Then create a point feature, add the popups array index properties of the point feature, then add the add it to the data source.
for (var i = 0; i < sampleLocationData.length; i++) {
//Create a popup.
popups.push(new atlas.Popup({
content: `<div style="padding:10px;" aria-label="Description">${sampleLocationData[i].description}</div>`,
position: sampleLocationData[i].position,
pixelOffset: [0, -18]
//Create a point feature and store the popups index from the array.
datasource.add(new[i].position), {
popupIdx: popups.length - 1
//Add all the popups to the map.
//Workaround: map.popups.add doesn't yet call the attach function under the hood automatically.
//TODO: Remove this December when this is no longer needed.
popups.forEach(x => {
//Add a symbol layer to display the point features on the map.
var layer = new atlas.layer.SymbolLayer(datasource);
//Add a click event the'click', layer, showPopup);
function showPopup(e) {
//Get the point feature the click event occured on.
var point = e.shapes[0];
//Get the popup for the point feature.
var popup = popups[point.getProperties().popupIdx];
//Open the popup.;
<body onload='GetMap()'>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Accessible popups</legend>
This sample shows how to use popups in a way that users can easily access them using keyboard shortcuts (tab) or on mouse click.
You can’t perform that action at this time.