Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
105 lines (86 sloc) 4.87 KB
<!DOCTYPE html>
<html lang="en">
<title>Load KML onto map - 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 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="" type="text/css" />
<script src=""></script>
<!-- Add reference to the Azure Maps Spatial IO module. -->
<script src=""></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.
//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();
//Add a simple data layer for rendering the data.
layer = new atlas.layer.SimpleDataLayer(datasource);
//Read a KML file from a URL or pass in a raw KML string. + '/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) {
//Load all ground overlays.
if (r.groundOverlays && r.groundOverlays.length > 0) {
//If bounding box information is known for data, set the map view to it.
if (r.bbox) {
map.setCamera({ bounds: r.bbox, padding: 50 });
<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.
You can’t perform that action at this time.