Permalink
Cannot retrieve contributors at this time
AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Spatial IO Module/Load KML onto map.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
117 lines (96 sloc)
5.69 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Load KML onto map - 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 load KML or KMZ files onto the map." /> | |
<meta name="keywords" content="map, gis, API, SDK, KML, KMZ, OGC, spatial data, spatial io module, geoxml" /> | |
<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> | |
<!-- Add reference to the Azure Maps Spatial IO module. --> | |
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script> | |
<script type='text/javascript'> | |
var map, datasource, layer; | |
var proxyServiceUrl = window.location.origin + '/Common/CorsEnabledProxyService.ashx?url='; | |
function GetMap() { | |
//Point the Azure Maps domain to the US Azure Gov Cloud domain. | |
atlas.setDomain('atlas.azure.us'); | |
//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); | |
//Add a simple data layer for rendering the data. | |
layer = new atlas.layer.SimpleDataLayer(datasource); | |
map.layers.add(layer); | |
//Read a KML file from a URL or pass in a raw KML string. | |
atlas.io.read(window.location.origin + '/Common/data/KML/2007SanDiegoCountyFires.kml', { | |
//Optionally provide a proxy service for accessing cross domain assets that may not have CORs enabled. | |
proxyService: proxyServiceUrl | |
}).then(async r => { | |
if (r) { | |
//Check to see if there are any icons in the data set that need to be loaded into the map resources. | |
if (r.icons) { | |
//For each icon image, create a promise to add it to the map, then run the promises in parrallel. | |
var imagePromises = []; | |
//The keys are the names of each icon image. | |
var keys = Object.keys(r.icons); | |
if (keys.length !== 0) { | |
keys.forEach(function (key) { | |
imagePromises.push(map.imageSprite.add(key, r.icons[key])); | |
}); | |
await Promise.all(imagePromises); | |
} | |
} | |
//Load all features. | |
if (r.features && r.features.length > 0) { | |
datasource.add(r.features); | |
} | |
//Load all ground overlays. | |
if (r.groundOverlays && r.groundOverlays.length > 0) { | |
map.layers.add(r.groundOverlays); | |
} | |
//If bounding box information is known for data, set the map view to it. | |
if (r.bbox) { | |
map.setCamera({ bounds: r.bbox, padding: 50 }); | |
} | |
} | |
}); | |
}); | |
} | |
</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><h1 style="font-size:16px">Load KML onto map</h1></legend> | |
This sample shows how to load KML or KMZ files onto the map. | |
The spatial IO module is used to parse the features in KML/KMZ file into GeoJSON. | |
KML ground overlays are returned as either an ImageLayer or an OgcMapLayer depending on if the ground overlay is a static image or a WMS service. | |
Custom images for icons are also captured and need to be added to the map resources before loading the features on the map. | |
</fieldset> | |
</body> | |
</html> |