Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Cross reference pixels in image layer - 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 cross reference pixel positions on a source image with the position of an image overlay on a map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, image, raster, layer, ground overlay, groundoverlay" />
<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, marker, imageLayer, imageViewerHandle;
//The source image coordinates.
var source = [[0, 0], [736, 0], [736, 856]];
//The target coordinates of the source image to bind to the map.
var target = [[-76, 41], [-70, 41], [-70.0, 36]];
var originPosition, toggledPosition = [[-70, 40], [-60, 37], [-63, 30], [-72, 33]];
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-74.2, 40],
zoom: 4,
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>'
//Get the source image viewer container and handle.
imageViewerHandle = document.getElementById('imageViewerHandle');
var container = document.getElementById('imageViewerContainer');
//Add support for dragging a point over the source image container.
var drag = false;
container.onmousedown = function () {
drag = true;
container.onmouseup = function () {
drag = false;
container.onmousemove = function (e) {
if (drag) {
//Get the pixel position of the image viewer handle, calculate the corresponding reference points on the map and update the marker position.
var p = [e.offsetX, e.offsetY]; = p[0] + 'px'; = p[1] + 'px';
if (imageLayer) {
imageLayer.getPositions([p]).then((positions) => {
var pos = positions[0];
marker.setOptions({ position: pos });
//Wait until the map resources are ready.'ready', function () {
//Create a draggable HTML marker.
marker = new atlas.HtmlMarker({
draggable: true,
color: 'red',
position: map.getCamera().center
//Add a drag event to get the position of the marker.'drag', marker, function () {
var pos = marker.getOptions().position;
//When the marker is dragged, calculate the pixel coordinate on the source image by repositioning the viewer handle.
if (imageLayer) {
imageLayer.getPixels([pos]).then((pixels) => {
var pixel = pixels[0]; = pixel[0] + 'px'; = pixel[1] + 'px';
//Add the marker to the map.
//Load the source image and gets its width/height, then calculate the ImageLayer coordinates using the reference points.
var img = new Image();
img.onload = function () {
originPosition = atlas.layer.ImageLayer.getCoordinatesFromRefPoints(img.width, img.height, source, target);
//Create the image layer and add it to the map.
imageLayer = new atlas.layer.ImageLayer({
url: '/Common/images/pixel-art.jpg',
coordinates: originPosition
img.src = '/Common/images/pixel-art.jpg';
function toogleImageLayerPosition() {
var pos = imageLayer.getOptions().coordinates;
if (JSON.stringify(pos) === JSON.stringify(originPosition)) {
imageLayer.setOptions({ coordinates: toggledPosition });
} else {
imageLayer.setOptions({ coordinates: originPosition });
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:50%;min-width:290px;height:600px;float:left;"></div>
<input type="button" value="Toggle image layer position" onclick="toogleImageLayerPosition()" style="position:absolute;top:10px;left:10px;"/>
<div id="imageViewerContainer" style="position:relative;width:50%;height:600px;overflow:hidden;float:left;">
<img src="/Common/images/pixel-art.jpg" style="pointer-events:none;" />
<div id="imageViewerHandle" style="pointer-events:none;background-color:red;border:solid 2px #fff;width:8px;height:8px;margin-left:-5px;position:absolute;top:0px;left:0px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Cross reference pixels in image layer</h1></legend>
This sample shows how to cross reference pixel positions on a source image with the position of an image overlay on a map.
Drag the red HTML marker or the square handle on the source image to see the corresponding source/target position displayed.
Rotate and pitch the map to see how the positions cross reference correctly.
If the image layer skews the source image, there may be a bit of distortion when cross referencing positions.