Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Map/Export Map as Image.html

Go to file
 
 
Cannot retrieve contributors at this time
191 lines (159 sloc) 7.84 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Export Map as Image - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<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 export the map canvas as an image which can be used in reports or emails." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, map image, export image, screenshots, reports, export map, earthquakes, USGS" />
<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>
<!-- Optional. Add a reference to the FileSaver library to make it easier to save the image as a PNG file locally. -->
<script src="../Common/scripts/FileSaver.js"></script>
<!-- Add a reference to the Map Image Exporter module. -->
<script src="../Common/scripts/azure-maps-image-exporter.min.js"></script>
<script type='text/javascript'>
var map, emailFile;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
map = new atlas.Map('myMap', {
//This option must be set to true in order to generate an image from the map canvas.
preserveDrawingBuffer: true,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Load some sample data for testing.
loadSampleData();
});
}
function loadInDiv() {
atlas.MapImageExporter.getImage(map).then(function (mapImg) {
var output = document.getElementById('output');
output.innerHTML = '';
output.appendChild(mapImg);
}, function (e) {
alert(e.message);
});
}
function openInNewWindow() {
atlas.MapImageExporter.getDataUri(map).then(function (dataUri) {
var win = window.open();
win.document.write('<img src="' + dataUri + '"/>');
}, function (error) {
alert(error);
});
}
function downloadMapImage() {
atlas.MapImageExporter.getBlob(map).then(function (mapImgBlob) {
saveAs(mapImgBlob, "mapImage.png");
}, function (e) {
alert(e.message);
});
}
function generateEmail() {
var to = '';
var subject = 'Map Image';
//Get a data Uri for the map image.
atlas.MapImageExporter.getDataUri(map).then(function (dataUri) {
var body = '<img src="' + dataUri + '"/>';
//Generate an EML file blob.
var data = new Blob(['To: ' + to + '\nSubject: ' + subject + '\nX-Unsent: 1\nContent-Type: text/html\n\n<html lang="en">\n<body>' + body + '</body>\n</html>'],
{ type: 'text/plain' });
if (emailFile !== null) {
window.URL.revokeObjectURL(emailFile);
}
emailFile = window.URL.createObjectURL(data);
//Update the email link to open the email.
var link = document.getElementById('emailLink');
link.href = emailFile;
link.style.display = 'block';
});
}
function loadSampleData() {
map.controls.add(new atlas.control.StyleControl({
style: 'dark',
mapStyles: 'all'
}), {
position: 'top-right'
});
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
radius: 20,
opacity: 0.8
}), 'labels');
map.layers.add([
new atlas.layer.BubbleLayer(datasource, 'earthquake-circles', {
opacity: 0.75,
color: [
'interpolate',
['linear'],
['get', 'mag'],
0, 'green',
5, 'yellow',
6, 'orange',
7, 'red'
],
radius: [
'interpolate',
['linear'],
['get', 'mag'],
0, 2,
8, 20
]
}),
new atlas.layer.SymbolLayer(datasource, 'earthquake-labels', {
iconOptions: {
image: 'none'
},
textOptions: {
textField: ['concat', ['to-string', ['get', 'mag']], 'm'],
textSize: 12
}
})
]);
}
</script>
</head>
<body onload="GetMap()">
<div style="height:600px;">
<div id="myMap" style="position:relative;width:calc(50% - 10px);height:600px;float:left;"></div>
<div id="output" style="float:left;margin-left:10px;"></div>
</div>
<br />
Create Map Image and:
<input type="button" value="Load in div" onclick="loadInDiv();" />
<input type="button" value="Open in new window" onclick="openInNewWindow();" />
<input type="button" value="Download" onclick="downloadMapImage();" />
<input type="button" value="Generate Email" onclick="generateEmail();" />
<a download="message.eml" id="emailLink" style="display: none">Open Email</a>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Export Map as Image</h1></legend>
This sample shows how to export the map canvas as an image which can be used in reports or emails.
Note that this will only export the rendered map HTML canvas, other HTML elements, such as HTML markers and controls are not rendered on the image.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-image-exporter" target="_blank">Azure Maps Image Exporter module</a>.
</fieldset>
</body>
</html>