Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Extract and display photo location - 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 extract location information from images from a URL or by dragging and dropping them onto the map, and display them on the map. " />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, EXIF, GPS, location, JPG, JPEG, TIFF, image, photo" />
<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>
<!-- Add a reference to the exif-js library for extracting metadata from images. -->
<script src="../Common/scripts/exif-js-min.js"></script>
<script type='text/javascript'>
var map, datasource, symbolLayer, popup, positions = [];
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
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 = '';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//Alternatively, use an Azure Maps key. Get an Azure Maps key at NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a style control and add it to the map.
map.controls.add(new atlas.control.StyleControl({
style: 'dark'
}), {
position: 'top-right'
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer to render the point data.
symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
icon: 'marker-blue',
allowOverlap: true,
ignorePlacement: true
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup({
position: [0, 0],
pixelOffset: [0, -18]
//Add a click event to the symbol layer.'click', symbolLayer, symbolClicked);
//Load an array of image urls and extract their location.
//Setup the drag & drop listeners on the map.
var dropZone = document.getElementById('myMap');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
function loadPhotosFromUrl(urls) {
//Remove any previously loaded data.
positions = [];
for (var i = 0; i < urls.length; i++) {
//Download the image as an array buffer.
var req = new XMLHttpRequest();"GET", urls[i], true);
req.responseType = "arraybuffer";
req.onload = function (event) {
loadImageArrayBuffer(req.response, 'image/jpeg');
function handleDragOver(evt) {
//Stop the browser from performing its default behavior when a file is dragged and dropped.
evt.dataTransfer.dropEffect = 'copy';
function handleFileSelect(evt) {
//Stop the browser from performing its default behavior when a file is dragged and dropped.
//Remove any previously loaded data.
positions = [];
//The list of files that have been dragged and dropped onto the map.
var files = evt.dataTransfer.files;
//Loop through and attempt to read each file.
for (var i = 0; i < files.length; i++) {
//Only read JPG, JPEG, and TIFF images.
if (files[0].type === 'image/jpeg' || files[0].type === 'image/jpg' || files[0].type === 'image/tiff') {
//Read the image file as an array buffer.
var reader = new FileReader();
reader.onload = function (e) {
loadImageArrayBuffer(, files[0].type);
function loadImageArrayBuffer(arrayBuffer, fileType) {
//Extract the exif info from the image file.
var exifInfo = EXIF.readFromBinaryFile(arrayBuffer);
//Extract the position information from the image.
var pos = getExifPosition(exifInfo);
if (pos) {
//Convert the file ArrayBuffer from the file reader into a blob URI.
var blob = new Blob([new Uint8Array(arrayBuffer)], { type: fileType });
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
//Create a point feature and store the URL and EXIF information so we can access it later. Add the feature to the data source.
datasource.add(new, {
url: imageUrl,
exif: exifInfo
//Update the maps position so that it displays the loaded symbols.
function getExifPosition(exifInfo) {
if (typeof exifInfo.GPSLongitude !== 'undefined' &&
typeof exifInfo.GPSLongitudeRef !== 'undefined' &&
typeof exifInfo.GPSLatitude !== 'undefined' &&
typeof exifInfo.GPSLatitudeRef !== 'undefined') {
//Convert this information into a GeoJSON position.
var pos = [
convertDMSToDD(exifInfo.GPSLongitude, exifInfo.GPSLongitudeRef),
convertDMSToDD(exifInfo.GPSLatitude, exifInfo.GPSLatitudeRef),
if (typeof exifInfo.GPSAltitude !== 'undefined') {
return pos;
return null;
//Converts a decimal, minute, second coordinate into a decimal degrees coordinate.
function convertDMSToDD(dms, direction) {
if (Array.isArray(dms) && dms.length >= 3) {
var dd = dms[0] //days
+ dms[1] / 60 //minutes
+ dms[2] / (60 * 60); //seconds
if (direction === 'S' || direction === 'W') {
dd *= -1;
} // Don't do anything for N or E
return dd;
return null;
function symbolClicked(e) {
//Make sure the event occurred on a point feature.
if (e.shapes && e.shapes.length > 0) {
var properties = e.shapes[0].getProperties();
var pos = e.shapes[0].getCoordinates();
//Populate the popupTemplate with data from the clicked point feature.
//Update the content of the popup with the image.
content: '<div style="padding:10px;"><img style="max-width:400px;" src="' + properties.url + '"/></div>',
//Update the position of the popup with the symbols coordinate.
position: pos
//Open the popup.;
//Bring the popup into view by centering the map over the symbol then offsetting it lower.
center: pos,
centerOffset: [0, -150]
function bringPositionsIntoView() {
//Calcuates the best position to view the symbols on the map.
if (positions.length === 1) {
center: positions[0],
zoom: 15,
type: 'fly' //Animate the view transition.
} else if (positions.length > 1) {
padding: 100, //Add some padding to account for the pixel size of the symbols.
type: 'fly' //Animate the view transition.
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div id="output"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Extract and display photo location</h1></legend>
This sample shows how to extract location information from images from a URL or by dragging and dropping them onto the map, and display them on the map.
Drag and drop multiple images onto the map all at once. For better performance, consider processing the images in a web worker.
This sample uses the open source <a href="">exif-js library</a> to extract information from images. This supports JPG, JPEG, and TIFF images.