Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
315 lines (272 sloc) 13.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spatial data write 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 the different write options for the atlas.io.write function." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, KML, KMZ, GeoRSS, GPX, GML, GeoJSON, CSV, 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="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>
<!-- Add reference to the Azure Maps Spatial IO module. -->
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
<script type='text/javascript'>
var inputTbx, outputTbx, currentGeoJson;
function init() {
inputTbx = document.getElementById('inputTbx');
outputTbx = document.getElementById('outputTbx');
//Download a GeoJSON file to use as an input source.
loadGeoJSON('/Common/data/geojson/US_States_Population_Density.json');
}
function loadGeoJSON(url) {
outputTbx.value = '';
inputTbx.value = '';
//Download a GeoJSON file to use as an input source.
fetch(url)
.then(function (response) {
return response.json();
}).then(function (response) {
currentGeoJson = response;
inputTbx.value = JSON.stringify(response, null, ' ');
});
}
function writeData() {
if (currentGeoJson) {
var options = getOptions();
atlas.io.write(currentGeoJson, options).then(function (dataString) {
outputTbx.value = dataString;
});
}
}
function formatUpdated() {
closeOptions();
var f = getSelectValue('format');
var id;
switch (f) {
case 'CSV':
document.getElementById('csvOptions').style.display = 'block';
break;
case 'GeoJSON':
break;
case 'GPX':
document.getElementById('xmlOptions').style.display = 'block';
break;
case 'GML':
document.getElementById('xmlOptions').style.display = 'block';
document.getElementById('gmlOptions').style.display = 'block';
document.getElementById('idOption').style.display = 'block';
break;
case 'GeoRSS':
case 'KML':
document.getElementById('xmlOptions').style.display = 'block';
document.getElementById('idOption').style.display = 'block';
break;
}
}
function closeOptions() {
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none';
}
}
function getOptions() {
//Capture generic write options, SpatialDataWriteOptions
var options = {
format: getSelectValue('format')
};
//Capture SpatialCsvWriteOptions
if (options.format === 'CSV') {
Object.assign(options, {
delimiter: document.getElementById('delimiter').value.replace('\\t', '\t'),
elvColName: document.getElementById('elvColName').value,
geoColName: document.getElementById('geoColName').value,
includeTypesInHeader: document.getElementById('includeTypesInHeader').checked,
latColName: document.getElementById('latColName').value,
lonColName: document.getElementById('lonColName').value,
spatialformat: getSelectValue('spatialformat'),
textQualifier: document.getElementById('textQualifier').value
});
}
//Capture SpatialXmlWriteOptions
if ('KML|GPX|GeoRSS|GML'.indexOf(options.format) != -1) {
Object.assign(options, {
prettyPrint: document.getElementById('prettyPrint').checked,
roundPositions: document.getElementById('roundPositions').checked,
writeIds: document.getElementById('writeIds').checked
});
}
//Capture GmlWriteOptions
if (options.format === 'GML') {
Object.assign(options, {
customNamespace: document.getElementById('customNamespace').value,
includeNamespace: document.getElementById('includeNamespace').checked,
includeSrsName: document.getElementById('includeSrsName').checked,
srsName: document.getElementById('srsName').value,
writeIds: document.getElementById('writeIds').checked
});
if (options.customNamespace === '') {
options.customNamespace = undefined;
}
if (options.srsName === '') {
options.srsName = undefined;
}
}
if (options.indentChars && options.indentChars === '') {
options.indentChars = undefined;
}
return options;
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
</script>
<style>
.container {
width: 100%;
height: 600px;
display: grid;
grid-template-columns: 1fr 340px 1fr;
grid-template-rows: 20px auto;
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.inputHeader {
grid-column: 1;
grid-row: 1;
}
#inputTbx {
grid-column: 1;
grid-row: 2;
}
.inputPanel {
grid-column: 2;
grid-row: 1;
}
.outputHeader {
grid-column: 3;
grid-row: 1;
}
#outputTbx {
grid-column: 3;
grid-row: 2;
}
.tabcontent {
display: none;
}
</style>
</head>
<body onload="init()">
<div class="container">
<div class="inputHeader">
<b>Input</b>
<a href="javascript:void(0);" onclick="loadGeoJSON('/Common/data/geojson/SamplePoiDataSet.json');">Sample Poi Data Set</a> |
<a href="javascript:void(0);" onclick="loadGeoJSON('/Common/data/geojson/US_States_Population_Density.json');">US States Population Density</a>
</div>
<textarea id="inputTbx" disabled="disabled"></textarea>
<div class="inputPanel">
<br /><br />
File Format:
<select id="format" onchange="formatUpdated()">
<option value="CSV" selected="selected">CSV</option>
<option value="GeoJSON">GeoJSON</option>
<option value="GeoRSS">GeoRSS</option>
<option value="GML">GML</option>
<option value="GPX">GPX</option>
<option value="KML">KML</option>
</select>
<br /><br />
<div id="csvOptions" class="tabcontent" style="display:block;">
<table>
<tr title="Specifies how the GeoJSON data should be written. If set to 'latlon' and the geometry is a Point type a latitude and longitude columns will be added. If the geometry is not a Point, its row will not be written. If set to 'latlonelv' an elevation column will also be added. Elevation data will be retrieved from 3rd value in position of Point if specified or by set to 0. If set to 'wkt' the geometry value will be written as a Well-Known Text string. Default: 'wkt'">
<td>spatialformat:</td>
<td>
<select id="spatialformat">
<option value="latlon">latlon</option>
<option value="latlonelv">latlonelv</option>
<option value="wkt" selected="selected">wkt</option>
</select>
</td>
</tr>
<tr title="The delimiter character that separates the cells in a row of data. Default: ','">
<td>delimiter:</td>
<td><input id="delimiter" type="text" value="," /></td>
</tr>
<tr title="Specifies if OData type information should be included in the header beside each column name in brackets. Possible type values: string, number, boolean, date, geography Default: false">
<td>includeTypesInHeader:</td>
<td><input id="includeTypesInHeader" type="checkbox" /></td>
</tr>
<tr title="The column name for the column in which the GeoJSON geometry is written to. Default: 'geo'">
<td>geoColName:</td>
<td><input id="geoColName" type="text" value="geo" /></td>
</tr>
<tr title="If spatialformat is 'latlon' or 'latlonelv' this specifies the name of the latitude column to be written in the header. Default: 'lat'">
<td>latColName:</td>
<td><input id="latColName" type="text" value="lat" /></td>
</tr>
<tr title="If spatialformat is 'latlon' or 'latlonelv' this specifies the name of the longitude column to be written in the header. Default: 'lon'">
<td>lonColName:</td>
<td><input id="lonColName" type="text" value="lon" /></td>
</tr>
<tr title="If spatialformat is 'latlonelv' this specifies the name of the elevation column to be written in the header. Default: 'elv'">
<td>elvColName:</td>
<td><input id="elvColName" type="text" value="elv" /></td>
</tr>
<tr title="Specifies the value that wraps text strings that contain the delimiter.">
<td>textQualifier:</td>
<td><input id="textQualifier" type="text" value="&quot;" /></td>
</tr>
</table>
</div>
<div id="xmlOptions" class="tabcontent">
<table>
<tr title="A boolean indicating if the generated XML should be use new lines and indents to make the generated nicely formatted. Default: true">
<td>prettyPrint:</td>
<td><input id="prettyPrint" type="checkbox" checked="checked" /></td>
</tr>
<tr title="A boolean indicating if Position and BoundingBox values should be rounded off to 6 decimals. Default: false">
<td>roundPositions:</td>
<td><input id="roundPositions" type="checkbox" /></td>
</tr>
</table>
</div>
<div id="idOption" class="tabcontent">
<table>
<tr title="Specifies if ID values should be written. Default: false">
<td>writeIds:</td>
<td><input id="writeIds" type="checkbox" /></td>
</tr>
</table>
</div>
<div id="gmlOptions" class="tabcontent">
<table>
<tr title="Namespace used for writing custom feature data in GML.">
<td>customNamespace:</td>
<td><input id="customNamespace" type="text" value="" /></td>
</tr>
<tr title="Specifies if the srsName value should be written. Default: false">
<td>includeSrsName:</td>
<td><input id="includeSrsName" type="checkbox" /></td>
</tr>
<tr title="The SRS name to add to the geometries. Default: 'urn:ogc:def:crs:EPSG::4326'">
<td>srsName:</td>
<td><input id="srsName" type="text" value="" /></td>
</tr>
</table>
</div>
<br /><br />
<input type="button" value="Write" onclick="writeData()" />
</div>
<b class="outputHeader">Output</b>
<textarea id="outputTbx"></textarea>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Spatial data write options</h1></legend>
This sample shows the different write options for the <b>atlas.io.write</b> function.
<br/><br/>
</fieldset>
</body>
</html>
You can’t perform that action at this time.