Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get points in current map view - 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 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="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, mockDataSize = 1000;
function GetMap() {
//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 = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx';
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 () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(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.
generateMockData();
//Monitor for when the map is done moving.
map.events.add('moveend', mapChangedView);
//Do an initial calculation for the initial map view.
mapChangedView();
});
}
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)) {
pointsInView.push(shapes[i]);
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 atlas.data.Feature(new atlas.data.Point(coord), {
name: 'Pin_' + i
}));
}
datasource.add(pins);
}
</script>
<style>
#myMap {
position: relative;
width: calc(100% - 210px);
min-width:290px;
height: 600px;
float:left;
}
#output {
float: left;
width: 200px;
height: 600px;
margin-left: 10px;
overflow-y: auto;
}
</style>
</head>
<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.
</fieldset>
</body>
</html>