Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
191 lines (155 sloc) 7.37 KB
<!DOCTYPE html>
<html lang="en">
<title>Get points in current map view - 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 determine which points of a data set are in the current map view." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, events, overview map, overview, mini map, minimap" />
<meta name="author" content="Microsoft Azure Maps" />
<link href="SiteResources/screenshots/MapsSampleIcon.png" rel="shortcut icon" />
<!-- 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, datasource, mockDataSize = 1000;
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
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer to render the point data.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
allowOverlap: true,
ignorePlacement: true
//Generate some mock data.
//Monitor for when the map is done moving.'moveend', mapChangedView);
//Do an initial calculation for the initial map view.
function mapChangedView() {
//Calculate a polygon for the map view.
var viewPolygon = getMapViewPolygon(map);
//Get all shapes in the datasource.
var shapes = datasource.getShapes();
var pointsInView = [];
//Do something with the points in view.
//For demo purposes, we will simply output the name of each pin.
var html = [];
//Search for all point shapes that intersect the polygon.
for (var i = 0; i < pins.length; i++) {
if (shapes[i].getType() === 'Point' && isPointInPolygon(shapes[i].getCoordinates(), viewPolygon)) {
html.push(shapes[i].getProperties().name, '<br/>');
document.getElementById('output').innerHTML = pointsInView.length + ' pins in view:<br/><br/>' + html.join('');
* Generates an array of polygons to create a polygon that represents the map view.
* Coordinates are converted into mercator piels so we can do pixel accurate calculations.
* @param map The map to calculate the view polygon for.
function getMapViewPolygon(map) {
//Simply using the bounding box of the map will not generate a polygon that represents the map area when it is rotated and pitched.
//Instead we need to calculate the coordinates of the corners of the map.
var mapRect = map.getCanvasContainer().getBoundingClientRect();
var width = mapRect.width;
var height = mapRect.height;
//Calculate positions from the corners of the map.
var pos = map.pixelsToPositions([
//Top Left corner
[0, 0],
//Top right corner.
[width, 0],
//Bottom Right corner.
[width, height],
//Bottom left corner.
[0, height]
//Convert the positions to mercator pixels at zoom level 22.
return atlas.math.mercatorPositionsToPixels(pos, 22);
* Checks to see if a position is within a mercator polygon.
* @param position A position point to determine if it is in a polygon.
* @param mercatorPolygon Array of Mercator coordinates that form a polygon.
function isPointInPolygon(position, mercatorPolygon) {
//Convert point into a mercator pixel at zoom level 22 for pixel accurate calculations.
var p = atlas.math.mercatorPositionsToPixels([position], 22)[0];
var x = p[0];
var y = p[1];
var inside = false;
for (var i = 0, j = mercatorPolygon.length - 1; i < mercatorPolygon.length; j = i++) {
var xi = mercatorPolygon[i][0], yi = mercatorPolygon[i][1];
var xj = mercatorPolygon[j][0], yj = mercatorPolygon[j][1];
if (((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
inside = !inside;
return inside;
function generateMockData() {
//This generates a bunch of random pins.
pins = [];
for (var i = 0; i < mockDataSize; i++) {
var coord = [
Math.random() * 360 - 180, //Random longitude value.
Math.random() * 170 - 85 //Random latitude value.
pins.push(new, {
name: 'Pin_' + i
#myMap {
position: relative;
width: calc(100% - 210px);
height: 600px;
#output {
float: left;
width: 200px;
height: 600px;
margin-left: 10px;
overflow-y: auto;
<body onload="GetMap()">
<div id="myMap"></div>
<div id="output"></div>
<div style="clear:both;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Get points in current map view</h1></legend>
This sample shows how to determine which points of a data set are in the current map view.
Pan and zoom the map to recalculate which points are in the current map view.
To do this the map view polygon is calculated to take into consideration the rotation and pitch of the map.
Since data is rendered on the map which uses a Mercator projection, and pixel accuracy is desired, the map
view polygon and all data points are converted into mercator pixels and a point in polygon algorithm is used with that data.
You can’t perform that action at this time.