Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
154 lines (130 sloc) 6.67 KB
<!DOCTYPE html>
<html>
<head>
<title>Cardinal Spline Options - 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 provides a set of controls to test the various features of the Cardinal Spline calculation." />
<meta name="keywords" content="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="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>
<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() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.103521, 47.612808],
zoom: 12,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
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);
//Create a layer for visualizing the lines on the map.
map.layers.add(
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 atlas.data.LineString(positions), null, {
color: 'red',
width: 2
});
spline = new atlas.Shape(new atlas.data.LineString(atlas.math.getCardinalSpline(positions, 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.
marker.properties = {
index: i
};
//Add the marker to the map.
map.markers.add(marker);
//Create a drag event for the marker.
map.events.add('drag', marker, markerDragged);
}
});
}
function markerDragged(e) {
//Update the position the marker represents.
positions[e.target.properties.index] = e.target.getOptions().position;
//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.
straightLine.setCoordinates(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));
}
</script>
</head>
<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;">
<table>
<tr>
<td>Tension:</td>
<td>
<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>
</form>
</td>
</tr>
<tr>
<td>Node Size:</td>
<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>
</form>
</td>
</tr>
<tr>
<td>Close:</td>
<td>
<input id="closeChbx" type="checkbox" onchange="calculateSpline()" />
</td>
</tr>
</table>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Cardinal Spline Options</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.
</fieldset>
</body>
</html>
You can’t perform that action at this time.