AzureMapsCodeSamples/Samples/Symbol Layer/Create Symbols from Custom JSON/Create Symbols from Custom JSON.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create Symbols from Custom JSON - 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 use this JSON data to create clickable symbols on a map, that when clicked, display a popup with the title and description values of the symbol that was clicked." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, markers, pins, pushpins, symbols, JSON, layer" />
    <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>

    <script>
        var map, datasource, popup;

        //Define an HTML template for a custom popup content laypout.
        var popupTemplate = '<div class="customInfobox"><div class="title">{title}</div>{description}</div>';

        var myCustomJson = {
            results: [
                {
                    title: 'Pin 1',
                    desc: 'I am pin 1',
                    lat: 45.0001,
                    lon: -110.0001
                },
                {
                    title: 'Pin 2',
                    desc: 'I am pin 2',
                    lat: 43.0832,
                    lon: -100.0832
                }
            ]
        };

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-105, 44],
                zoom: 5,
                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 () {

                //Loop through all results in the custom JSON object can create Point features from them.
                var points = [];

                if (myCustomJson && myCustomJson.results && myCustomJson.results.length > 0) {

                    for (var i = 0; i < myCustomJson.results.length; i++) {

                        //Create a position object from the lon and lat values.
                        var position = new atlas.data.Position(myCustomJson.results[i].lon, myCustomJson.results[i].lat);

                        //Create a Point feature and pass in the result object as the properties so that we can access them later if needed.
                        var point = new atlas.data.Feature(new atlas.data.Point(position), myCustomJson.results[i]);

                        points.push(point);
                    }
                }

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Add point data to the data source.
                datasource.add(points);

                //Create a layer that defines how to render the points on the map.
                var symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
                    textOptions: {
                        textField: ['get', 'title'],    //Specify the property name that contains the text you want to appear with the symbol.
                        offset: [0, 1.2]
                    }
                });

                map.layers.add(symbolLayer);

                //Create a popup but leave it closed so we can update it and display it later.
                popup = new atlas.Popup({
                    position: [0, 0],
                    pixelOffset: [0, -18]
                });

                //Add a click event to the symbol layer.
                map.events.add('click', symbolLayer, symbolClicked);
            });
        }

        function symbolClicked(e) {
            //Make sure the event occurred on a pin.
            if (e.shapes && e.shapes.length > 0&& e.shapes[0].getType() === 'Point') {
                var properties = e.shapes[0].getProperties();

                popup.setOptions({
                    //Update the content of the popup.
                    content: popupTemplate.replace('{title}', properties.title).replace('{description}', properties.desc),

                    //Update the position of the popup with the pins coordinate.
                    position: e.shapes[0].getCoordinates()
                });

                //Open the popup.
                popup.open(map);
            }
        }
    </script>
    <style>
        /* CSS styles used by custom popup template */
        .customInfobox {
            max-width: 200px;
            padding: 10px;
            font-size: 12px;
        }

            .customInfobox .title {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
            }
    </style>
</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>Create Symbols from Custom JSON</legend>
        It is fairly common to access JSON data in your application which contains location data but is not in GeoJSON format.
        This sample shows how to use this JSON data to create clickable symbols on a map, that when clicked, display a popup with
        the title and description values of the symbol that was clicked.
    </fieldset>
</body>
</html>