Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
<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="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>

<body>
    <div class="container">

        <div class="inputHeader">

            <b>Input</b>

            <a href="javascript:void(0);" onclick="loadGeoJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/SamplePoiDataSet.json');">Sample Poi Data Set</a> |

            <a href="javascript:void(0);" onclick="loadGeoJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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>
</body>

</html>
              
            
!

CSS

              
                 .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;
}

              
            
!

JS

              
                var inputTbx, outputTbx, currentGeoJson;
inputTbx = document.getElementById('inputTbx');
outputTbx = document.getElementById('outputTbx');
//Download a GeoJSON file to use as an input source.
loadGeoJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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;
}
              
            
!
999px

Console