Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
148 lines (121 sloc) 5.99 KB
<!DOCTYPE html>
<html lang="en">
<title>Create Symbols from Custom JSON - 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 use this JSON data to create clickable symbols on a map, that when clicked, display a popup with the title and description values of the symbol that was clicked." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, JSON, layer" />
<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>
<script type='text/javascript'>
var map, datasource, popup;
//Define an HTML template for a custom popup content laypout.
var popupTemplate = '<div class="customInfobox"><div class="title">{title}</div>{description}</div>';
var myCustomJson = {
results: [
title: 'Pin 1',
desc: 'I am pin 1',
lat: 45.0001,
lon: -110.0001
title: 'Pin 2',
desc: 'I am pin 2',
lat: 43.0832,
lon: -100.0832
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, 44],
zoom: 5,
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 () {
//Loop through all results in the custom JSON object can create Point features from them.
var points = [];
if (myCustomJson && myCustomJson.results && myCustomJson.results.length > 0) {
for (var i = 0; i < myCustomJson.results.length; i++) {
//Create a position object from the lon and lat values.
var position = new[i].lon, myCustomJson.results[i].lat);
//Create a Point feature and pass in the result object as the properties so that we can access them later if needed.
var point = new, myCustomJson.results[i]);
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Add point data to the data source.
//Create a layer that defines how to render the points on the map.
var symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
textOptions: {
textField: ['get', 'title'], //Specify the property name that contains the text you want to appear with the symbol.
offset: [0, 1.2]
//Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup({
position: [0, 0],
pixelOffset: [0, -18]
//Add a click event to the symbol layer.'click', symbolLayer, symbolClicked);
function symbolClicked(e) {
//Make sure the event occurred on a pin.
if (e.shapes && e.shapes.length > 0&& e.shapes[0].getType() === 'Point') {
var properties = e.shapes[0].getProperties();
//Update the content of the popup.
content: popupTemplate.replace('{title}', properties.title).replace('{description}', properties.desc),
//Update the position of the popup with the pins coordinate.
position: e.shapes[0].getCoordinates()
//Open the popup.;
/* CSS styles used by custom popup template */
.customInfobox {
max-width: 200px;
padding: 10px;
font-size: 12px;
.customInfobox .title {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
<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">Create Symbols from Custom JSON</h1></legend>
It is fairly common to access JSON data in your application which contains location data but is not in GeoJSON format.
This sample shows how to use this JSON data to create clickable symbols on a map, that when clicked, display a popup with
the title and description values of the symbol that was clicked.
You can’t perform that action at this time.