Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Large GeoJSON Files - 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 demonstrates loading large GeoJSON files into the Azure Maps Web SDK." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, symbol, pushpin, marker, pin, line, linestring, polygon, parcels" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Atlas Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource, infopane, completed = 0, featureCnt = 0, totalFileSize = 0;
var geoJsonData = [
{ name: 'Parcel Boundaries', url: '../Common/data/geojson/parcels.json', fileSizeMB: 80, geomType: 'polygons' },
{ name: 'Streets', url: '../Common/data/geojson/streets.json', fileSizeMB: 16, geomType: 'lines' },
{ name: 'Addresses', url: '../Common/data/geojson/address.json', fileSizeMB: 41, geomType: 'points' }
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-105.076, 40.55],
zoom: 11,
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>'
infopane = document.getElementById('infopane');
//Wait until the map resources are ready.'ready', function () {
//Create a data source to store the data in.
datasource = new atlas.source.DataSource();
//Add a layer for rendering the outline of polygons.
var polygonLayer = new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'black',
filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']] //Only render Polygon or MultiPolygon in this layer.
//Add a click event to the layer.'click', polygonLayer, featureClicked);
//Add a layer for rendering line data.
var lineLayer = new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'purple',
strokeWidth: 4,
filter: ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] //Only render LineString or MultiLineString in this layer.
//Add a click event to the layer.'click', lineLayer, featureClicked);
//Add a layer for rendering point data.
var pointLayer = new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
allowOverlap: true,
ignorePlacement: true,
image: 'pin-round-darkblue'
filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
//Add a click event to the layer.'click', pointLayer, featureClicked);
//Add all layers to the map.
map.layers.add([polygonLayer, lineLayer, pointLayer]);
//Load the GeoJSON feeds.
function loadGeoJsonFile(geoJsonFeed) {
infopane.innerHTML += 'Downloading ' + + '...</br/>';
//Download the GeoJSON feed.
datasource.importDataFromUrl(geoJsonFeed.url).then(function () {
var numFeatures = datasource.getShapes().length;
infopane.innerHTML += `Retrieved ${(numFeatures - featureCnt).toLocaleString()} ${geoJsonFeed.geomType} (${geoJsonFeed.fileSizeMB} MB)<br/>`;
featureCnt = numFeatures;
totalFileSize += geoJsonFeed.fileSizeMB;
if (completed === geoJsonData.length) {
infopane.innerHTML += `Rendering ${featureCnt.toLocaleString()} features (${totalFileSize} MB)...`;
function featureClicked(e) {
//Make sure the event occurred on a shape feature.
if (e.shapes && e.shapes.length > 0) {
//By default, show the popup where the mouse event occurred.
var pos = e.position;
var offset = [0, 0];
var properties;
if (e.shapes[0] instanceof atlas.Shape) {
properties = e.shapes[0].getProperties();
//If the shape is a point feature, show the popup at the points coordinate.
if (e.shapes[0].getType() === 'Point') {
pos = e.shapes[0].getCoordinates();
offset = [0, -18];
} else {
properties = e.shapes[0].properties;
//If the shape is a point feature, show the popup at the points coordinate.
if (e.shapes[0].type === 'Point') {
pos = e.shapes[0].geometry.coordinates;
offset = [0, -18];
//Update the content and position of the popup.
//Create a table from the properties in the feature.
content: atlas.PopupTemplate.applyTemplate(properties),
position: pos,
pixelOffset: offset
//Open the popup.;
#myMap {
position: relative;
width: calc(100% - 210px);
height: 600px;
float: left;
#infopane {
margin-left: 10px;
width: 200px;
height: 600px;
overflow-y: auto;
float: left;
table {
border-collapse: collapse;
table, th, td {
border: 1px solid black;
<body onload="GetMap()">
<div id="myMap"></div>
<div id="infopane"></div>
<div style="clear:both;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Large GeoJSON Files</h1></legend>
This sample loads three large GeoJSON files which contain address (point), parcel boundary (polygon), and street (lines) data for all of Fort Collins, CO.<br/><br/>
This sample loads a lot of data and will be slow to load.