AzureMapsCodeSamples/Samples/Spatial IO Module/Load spatial data (simple)/Load spatial data (simple).html at main · Azure-Samples/AzureMapsCodeSamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Load spatial data (simple) - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to easily load spatial data using the spatial io module into the map. " />
    <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" /><meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.jpg" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/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>
        var map, datasource, layer;

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',
                language: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    // Use SAS token for authentication
                    authType: 'sas',
                    getToken: function (resolve, reject, map) {
                        // URL to your authentication service that retrieves a SAS Token
                        var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsSasToken';

                        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
                    }

                    //Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                    //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);

                //Add a simple data layer for rendering the data.
                layer = new atlas.layer.SimpleDataLayer(datasource);
                map.layers.add(layer);

                //Read an XML file from a URL or pass in a raw XML string.
                atlas.io.read(window.location.origin + '/data/Gpx/Route66Attractions.xml').then(r => {
                    if (r) {
                        //Add the feature data to the data source.
                        datasource.add(r);

                        //If bounding box information is known for data, set the map view to it.
                        if (r.bbox) {
                            map.setCamera({ bounds: r.bbox, padding: 50 });
                        }
                    }

                    //NOTE: KML/KMZ can contain ground overlays which are returned in the "groundOverlay" property of the data set.
                    //Additionally, any images parsed for use as custom icons when rendering points are in the "icons" property of the data set and should be added to the maps resource before adding the data to the data source.
                    //See the "Load KML onto map" sample for more complete example for KML/KMZ data sets.
                });
            });
        }
    </script>
</head>
<body onload="getMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>Load spatial data (simple)</legend>
        This sample shows how to easily load spatial data using the spatial io module into the map.
        The <b>atlas.io.read</b> function supports reading KML, KMZ, GPX, GeoRSS, GML, GeoJSON, CSV (with spatial columns).
        This function can take in a string that contains the raw data or a URL to the data.
        The data format will be automatically detected and parsed acoordingly.
        This function returns a SpatialDataSet object that extends from a GeoJSON Feature Collection.
        Passing this directly into a data source will load all features in the data set.
        Here is a list of all the properties within a SpatialDataSet object.
        <ul>
            <li>bbox - Bounding box of all the data in the data set.</li>
            <li>features - GeoJSON features within the data set.</li>
            <li>groundOverlays - An array of image or OGC map layers that represent KML GroundOverlays.</li>
            <li>properties - Property information provided at the document level of a spatial data set.</li>
            <li>stats - Statistics about the content and processing time of a spatial data set.</li>
            <li>icons - A set of icon URL's. Key = icon name, Value = URL.</li>
            <li>type - The GeoJSON type; "FeatureCollection".</li>
        </ul>
        <b>Note:</b> Not all file and mime types are enabled in all servers. If using .NET, it is recommended to add the following to the web.config file in the &lt;system.webServer&gt; section:
        <br /> <br />
        &lt;staticContent&gt;<br />
        &emsp;&lt;remove fileExtension=".json"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".json" mimeType="application/json"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".geojson" mimeType="application/json"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".gpx" mimeType="application/xml"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".georss" mimeType="application/xml"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".kmz" mimeType="application/vnd.google-earth.kmz"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".tab" mimeType="text/plain"/&gt;<br />
        &emsp;&lt;mimeMap fileExtension=".pipe" mimeType="text/plain"/&gt;<br />
        &lt;/staticContent&gt;
    </fieldset>
</body>
</html>