Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Cardinal Spline Options - 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 provides a set of controls to test the various features of the Cardinal Spline calculation." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, spatial math, math, spline, cardinal spline, curves, lines, line 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, spline, straightLine, tension = 0.5, nodeSize = 30, close = false;
//Sample positions.
var positions = [
[-122.102663, 47.644390],
[-122.087213, 47.628544],
[-122.109186, 47.608526],
[-122.111589, 47.580163]
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.103521, 47.612808],
zoom: 12,
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>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer for visualizing the lines on the map.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: ['get', 'color'],
strokeWidth: ['get', 'width']
//Create to line shapes for easy updating. A red straightline will be created to show the straight line path between the points.
straightLine = new atlas.Shape(new, null, {
color: 'red',
width: 2
spline = new atlas.Shape(new, tension, nodeSize, close)), null, {
color: 'blue',
width: 3
//Add the lines to the data source.
datasource.add([straightLine, spline]);
//Create a draggable HTML marker for each position.
for (var i = 0; i < positions.length; i++) {
var marker = new atlas.HtmlMarker({
draggable: true,
position: positions[i]
//Store the position index in the marker properties so that we can easily update the cardinal spline as the marker is dragged. = {
index: i
//Add the marker to the map.
//Create a drag event for the marker.'drag', marker, markerDragged);
function markerDragged(e) {
//Update the position the marker represents.
positions[] =;
//Calculate the cardinal spline coordinates and update the spline.
spline.setCoordinates(atlas.math.getCardinalSpline(positions, tension, nodeSize, close));
//Update the lines with the new positions.
function calculateSpline() {
//Get the spline options.
tension = parseFloat(document.getElementById("tensionSlider").value);
nodeSize = parseInt(document.getElementById("nodeSizeSlider").value);
close = document.getElementById("closeChbx").checked;
//Calculate positions for the new cardinal spline options and update the spline coordinates.
spline.setCoordinates(atlas.math.getCardinalSpline(positions, tension, nodeSize, close));
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:10px; left:10px;border-radius:10px;background-color:white;">
<form oninput="tension.value=tensionSlider.value">
<input type="range" id="tensionSlider" value="0.5" min="-2" max="2" step="0.1" oninput="calculateSpline()" onchange="calculateSpline()" />
<output name="tension" for="tensionSlider">0.5</output>
<td>Node Size:</td>
<form oninput="nodeSize.value=nodeSizeSlider.value">
<input type="range" id="nodeSizeSlider" value="30" min="2" max="100" step="1" oninput="calculateSpline()" onchange="calculateSpline()" />
<output name="nodeSize" for="nodeSizeSlider">30</output>
<input id="closeChbx" type="checkbox" onchange="calculateSpline()" />
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Cardinal Spline Options</h1></legend>
This sample provides a set of controls to test the various features of the Cardinal Spline calculation.
The red line shows the straight line path between the sample points, and the blue line shows the cardinal spline between the same set of points.
Drag the markers, change the tension and node size using the sliders, or make the cardinal spline a closed shape.