Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
329 lines (288 sloc) 13.6 KB
<!DOCTYPE html>
<html>
<head>
<title>Line Layer 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 shows how the different options of the line layer affect rendering." />
<meta name="keywords" content="map, gis, API, SDK, line, linestring, polyline, layer, linelayer" />
<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 src="../Common/scripts/clipboard.min.js"></script>
<script type='text/javascript'>
var map, datasource, lineLayer, defaultOptions, removeDefaults;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-90, 40],
zoom: 2,
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 style control and add it to the map.
map.controls.add(new atlas.control.StyleControl({
style: 'dark'
}), {
position: 'top-right'
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add line to data source.
datasource.add(new atlas.data.LineString([[-74.00390, 40.88029], [-87.58300, 41.93497], [-105.20507, 39.77476], [-122.43164, 47.66538]]));
//Create a layer to render the line data.
lineLayer = new atlas.layer.LineLayer(datasource);
map.layers.add(lineLayer);
defaultOptions = lineLayer.getOptions();
//Update the line layer with the options in the input fields.
updateLineLayer();
});
new ClipboardJS('.copyBtn');
}
function updateLineLayer() {
var options = getInputOptions();
//Update all the options in the line layer.
lineLayer.setOptions(options);
document.getElementById('CodeOutput').value = JSON.stringify(options, null, '\t').replace(/\"([^(\")"]+)\":/g, "$1:");
}
function getInputOptions() {
removeDefaults = document.getElementById('RemoveDefaults').checked;
var sda = document.getElementById('StrokeDashArray').value;
var dashArray = undefined;
if (sda && sda != '') {
sda = sda.split(/[\s,]+/);
if (sda && sda.length > 1) {
dashArray = [];
for (var i = 0; i < sda.length; i++) {
dashArray.push(parseInt(sda[i]));
}
}
}
return {
strokeColor: getPropertyValue('color', document.getElementById('StrokeColor').value),
strokeOpacity: getPropertyValue('strokeOpacity', parseFloat(document.getElementById('StrokeOpacity').value)),
strokeWidth: getPropertyValue('strokeWidth', parseFloat(document.getElementById('StrokeWidth').value)),
blur: getPropertyValue('blur', parseFloat(document.getElementById('Blur').value)),
lineCap: getPropertyValue('lineCap', getSelectValue('LineCap')),
lineJoin: getPropertyValue('lineJoin', getSelectValue('LineJoin')),
offset: getPropertyValue('offset', parseFloat(document.getElementById('Offset').value)),
minZoom: getPropertyValue('minZoom', parseFloat(document.getElementById('MinZoom').value)),
maxZoom: getPropertyValue('maxZoom', parseFloat(document.getElementById('MaxZoom').value)),
visible: getPropertyValue('visible', document.getElementById('Visible').checked),
strokeDashArray: dashArray
};
}
function getPropertyValue(propertyName, value) {
if (removeDefaults && defaultOptions[propertyName] === value) {
return undefined;
}
return value;
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
function openTab(elm, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
elm.className += " active";
}
</script>
<style>
#myMap {
position: relative;
width: calc(100% - 375px);
min-width:290px;
height: 600px;
float: left;
}
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
}
#CodeOutput {
width: 300px;
height: 420px;
overflow-y: auto;
}
.copyBtn {
float: right;
}
table td:nth-of-type(1) {
width: 120px;
}
table td:nth-of-type(2) {
width: 200px;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 6px 8px;
transition: 0.3s;
font-size: 14px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body onload="GetMap()">
<fieldset class="sidePanel">
<legend>Line Layer Options</legend>
This sample shows how the different options of the line layer affect rendering.
<br /><br />
<div class="tab">
<button class="tablinks active" onclick="openTab(this, 'StyleOptions')">Base Options</button>
<button class="tablinks" onclick="openTab(this, 'LineStyleOptions')">Line Options</button>
<button class="tablinks" onclick="openTab(this, 'Code')">Code</button>
</div>
<div id="StyleOptions" class="tabcontent" style="display:block;">
<table>
<tr title="An integer specifying the minimum zoom level to render the layer at.">
<td>Min Zoom:</td>
<td>
<form oninput="minz.value=MinZoom.value">
<input type="range" id="MinZoom" value="0" min="0" max="24" step="1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="minz" for="MinZoom">0</output>
</form>
</td>
</tr>
<tr title="An integer specifying the maximum zoom level to render the layer at.">
<td>Min Zoom:</td>
<td>
<form oninput="maxz.value=MaxZoom.value">
<input type="range" id="MaxZoom" value="24" min="0" max="24" step="1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="maxz" for="MaxZoom">24</output>
</form>
</td>
</tr>
<tr title="Specifies if the layer is visible or not.">
<td>Visible:</td>
<td><input id="Visible" type="checkbox" onclick="updateLineLayer()" checked="checked" /></td>
</tr>
</table>
<p>
In addition to the options in this tool, the LineLayer also has options for;
<ul>
<li>sourceLayer - used with VectorTileSource.</li>
<li>strokeGradient</li>
<li>filter - used to filter data in layer.</li>
</ul>
Many options in this layer also support Expressions which are not demonstrated in this sample.
</p>
</div>
<div id="LineStyleOptions" class="tabcontent">
<table>
<tr title="The color used to outline the line.">
<td>Stroke Color:</td>
<td><input type="color" id="StrokeColor" value="#1E90FF" onchange="updateLineLayer()" /></td>
</tr>
<tr title="A number between 0 and 1 that indicates the opacity at which the stroke will be drawn.">
<td>Stroke Opacity:</td>
<td>
<form oninput="o.value=StrokeOpacity.value">
<input type="range" id="StrokeOpacity" value="1" min="0" max="1" step="0.1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="o" for="StrokeOpacity">1</output>
</form>
</td>
</tr>
<tr title="The width of the line in pixels. Must be a value greater or equal to 0.">
<td>Stroke Width:</td>
<td>
<form oninput="sw.value=StrokeWidth.value">
<input type="range" id="StrokeWidth" value="2" min="0" max="25" step="1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="sw" for="StrokeWidth">2</output>
</form>
</td>
</tr>
<tr title="Specifies how the ends of the lines are rendered.">
<td>Line Cap:</td>
<td>
<select id="LineCap" onchange="updateLineLayer()">
<option value="butt">butt</option>
<option value="round" selected="selected">round</option>
<option value="square">square</option>
</select>
</td>
</tr>
<tr title="Specifies how the joints in the lines are rendered.">
<td>Line Join:</td>
<td>
<select id="LineJoin" onchange="updateLineLayer()">
<option value="bevel">bevel</option>
<option value="miter">miter</option>
<option value="round" selected="selected">round</option>
</select>
</td>
</tr>
<tr title="The amount of blur to apply to the line in pixels.">
<td>Blur:</td>
<td>
<form oninput="b.value=Blur.value">
<input type="range" id="Blur" value="0" min="0" max="25" step="1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="b" for="Blur">0</output>
</form>
</td>
</tr>
<tr title="The line's offset.">
<td>Offset:</td>
<td>
<form oninput="o.value=Offset.value">
<input type="range" id="Offset" value="0" min="-25" max="25" step="1" oninput="updateLineLayer()" onchange="updateLineLayer()" />
<output name="o" for="Offset">0</output>
</form>
</td>
</tr>
<tr title="An integer value that specifies the width and height dimensions of the map tiles. For a seamless experience, the tile size must by a multiplier of 2. ">
<td>Stroke Dash Array</td>
<td>
<input type="text" id="StrokeDashArray" onkeyup="updateLineLayer()"/>
</td>
</tr>
</table>
</div>
<div id="Code" class="tabcontent">
<textarea id="CodeOutput"></textarea><br /><br />
<input id="RemoveDefaults" type="checkbox" onclick="updateLineLayer()" checked="checked" /> Remove defaults
<button class="copyBtn" data-clipboard-target="#CodeOutput">Copy to clipboard</button>
</div>
</fieldset>
<div id="myMap"></div>
</body>
</html>
You can’t perform that action at this time.