Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
164 lines (134 sloc) 6.99 KB
<!DOCTYPE html>
<html>
<head>
<title>Limit Map to Two Finger Panning - 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 limit the map drag functionality such that the user is only able to drag the map when using two fingers. This is useful when using the map API inside of mobile apps where the user is likely to scroll the page using a single finger." />
<meta name="keywords" content="map, gis, API, SDK, two finger panning, dragging, panning, map, user interaction, dragPanInteraction" />
<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, datasource;
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>'
}
});
//Restrict the map to two finger panning only.
RestrictMapToTwoFingerPan(map);
}
function RestrictMapToTwoFingerPan(map) {
var pointerCount = 0;
//Create a message dialog to tell the user how to zoom the map if they use the scroll wheel on the map without CTRL.
var msgDialog = document.createElement('div');
msgDialog.innerHTML = '<div style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);color:white;font-size:24px;font-weight:bold;transition:visibility 0s linear 0s, opacity 500ms;"><div style="position:relative;float:left;top:50%;left:50%;transform:translate(-50%,-50%);">Use two fingers to move the map</div></div>'
msgDialog = msgDialog.firstChild;
map.getMapContainer().append(msgDialog);
//Show the message dialog for 2 seconds then fade out over 300ms.
var showMsgDialog = function () {
msgDialog.style.display = '';
msgDialog.style.opacity = 1;
setTimeout(function () {
msgDialog.style.opacity = 0;
setTimeout(function () {
msgDialog.style.display = 'none';
}, 300);
}, 2000);
};
//Monitor the drag start event.
map.events.add('dragstart', function (e) {
//Determine if the drag event is due to touch.
if (e.originalEvent && pointerCount === 1) {
//If there is only one touch point, disable drag panning by disablling, then re-enabling to cancel the current pan request.
//Disable then re-enable the drag panning. This will cancel the single touch drag functionality.
map.setUserInteraction({ dragPanInteraction: false });
map.setUserInteraction({ dragPanInteraction: true });
showMsgDialog();
}
});
//Add touch events to the map container and monitor the movement and move the page accordingly when there is a single touch.
var pageX = 0;
var pageY = 0;
var scale = 1;
var mapDiv = map.getMapContainer();
var touchStartHandler = function (e) {
var px, py;
if (window.PointerEvent) {
if (e.pointerType !== 'touch') {
return;
}
pointerCount++;
px = e.pageX;
py = e.pageY;
} else {
pointerCount = e.touches.length;
px = e.touches[0].pageX;
py = e.touches[0].pageY;
}
if (pointerCount === 2) {
e.stopImmediatePropagation();
e.preventDefault();
return;
}
pageX = px;
pageY = py;
};
var touchMoveHandler = function (e) {
var px, py;
if (window.PointerEvent) {
if (e.pointerType !== 'touch') {
return;
}
px = pageX - e.screenX;
py = pageY - e.screenY;
} else {
pointerCount = e.touches.length;
px = pageX - e.touches[0].screenX;
py = pageY - e.touches[0].screenY;
}
if (pointerCount === 2) {
return;
}
if (scale === e.scale) {
e.stopImmediatePropagation();
e.preventDefault();
}
scale = e.scale;
window.scrollTo(px, py);
};
//Add support for Pointer Events and fallback onto touch events. Edge only supports pointer events, and Safari only supports touch events. Chrome supports both.
if (window.PointerEvent) {
mapDiv.addEventListener('pointerdown', touchStartHandler, false);
mapDiv.addEventListener('pointerup', (e) => {
if (e.pointerType === 'touch') {
pointerCount--;
}
}, false);
mapDiv.addEventListener('pointermove', touchMoveHandler, false);
} else {
mapDiv.addEventListener('touchstart', touchStartHandler, false);
mapDiv.addEventListener('touchmove', touchMoveHandler, false);
}
}
</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>Limit Map to Two Finger Panning</legend>
This sample shows how to limit the map drag functionality such that the user is only able to drag the map when using two fingers.
This is useful when using the map API inside of mobile apps where the user is likely to scroll the page using a single finger.
</fieldset>
<br /><br />Adding several new lines so that the page can be scrolled.<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
You can’t perform that action at this time.