-
Notifications
You must be signed in to change notification settings - Fork 455
/
Copy pathExport Map as Image.html
190 lines (158 loc) · 7.73 KB
/
Export Map as Image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!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 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" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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="/lib/file-saver/dist/FileSaver.min.js"></script>
<!-- Add a reference to the Map Image Exporter module. -->
<script src="/lib/azure-maps/azure-maps-image-exporter.min.js"></script>
<script>
var map, emailFile;
function getMap() {
//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 Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
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', {
createIndicators: true, // to enable bubble layer a11y feature
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>Export Map as Image</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>