Skip to content
Permalink
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>
<html>
<head>
<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="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></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 https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(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 atlas.data.Feature(new atlas.data.Point(sampleLocationData[i].position), {
popupIdx: popups.length - 1
}));
}
//Add all the popups to the map.
map.popups.add(popups);
//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 => {
x.attach(map);
});
//Add a symbol layer to display the point features on the map.
var layer = new atlas.layer.SymbolLayer(datasource);
map.layers.add(layer);
//Add a click event the
map.events.add('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.
popup.open(map);
}
</script>
</head>
<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.
</fieldset>
</body>
</html>
You can’t perform that action at this time.