AzureMapsCodeSamples/Samples/HTML Markers/Pie Chart HTML Markers/Pie Chart HTML Markers.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pie Chart HTML Markers - 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 create a pie chart using an HTML marker." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, html markers, markers, pins, pushpins, symbols, style, chart, pie chart" />
    <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 a reference to the HTML Marker layer module. -->
    <script src="/lib/azure-maps/azure-maps-html-marker-layer.min.js"></script>

    <script>
        var map, popup, markers = [];

        //A name for each slice in the pie chart. Should have a length >= to largest values array in data set.
        var legend = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];

        //The min and max radius of a pie chart in pixels.
        var minRadius = 10, maxRadius = 50;

        //This is the mock data to power the chart.
        var mockData = [
            {
                properties: {
                    name: 'Location 1'
                },
                position: [-110, 45],
                values: [20, 45, 70, 11, 10]  //The values for each slice in the pie chart.
            },
            {
                properties: {
                    name: 'Location 2'
                },
                position: [-80, 40],
                values: [35, 33, 10, 13, 35]
            },
            {
                properties: {
                    name: 'Location 3'
                },
                position: [-90, 51],
                values: [15, 80, 30, 10, 5]
            },
            {
                properties: {
                    name: 'Location 3'
                },
                position: [-100, 35],
                values: [15, 12, 27, 10, 5]
            }
        ];

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

                var maxValue = 0;

                //Loop through the mock data, create a popup for each marker and calculate the max total value so that markers can be scaled relatively.
                for (var i = 0; i < mockData.length; i++) {

                    //Create the pie chart marker and add it to the map.
                    var marker = new atlas.PieChartMarker(Object.assign(mockData[i]));

                    //Append properties to the marker.
                    marker.properties = mockData[i].properties;

                    //Add the marker to the map.
                    map.markers.add(marker);

                    //Create a popup for the marker. Also set the tooltip callback function.
                    marker.setOptions({
                        popup: new atlas.Popup({
                            content: getMarkerPopupContent(marker),
                            pixelOffset: [0, 0]
                        }),
                        tooltipCallback: tooltipCallback
                    });

                    //Add a click event to the marker.
                    map.events.add('click', marker, markerClicked);

                    //Get the total value of the pie chart and see if it is the max value out of all other pie charts.
                    var val = marker.getTotalValue();

                    if (val > maxValue) {
                        maxValue = val;
                    }

                    //Store the marker so we can loop through them and scale their radiis.
                    markers.push(marker);
                }

                //Loop through the markers, set the radius such that it is scaled based on the max value of all pie chart markers.
                for (var i = 0; i < markers.length; i++) {
                    var r = Math.round(Math.max(markers[i].getTotalValue() / maxValue * maxRadius, minRadius));
                    markers[i].setOptions({
                        radius: r
                    });
                }
            });
        }

        function markerClicked(e) {
            var m = e.target;

            //Close all other popups. Remove this loop if you want to display multiple popups at a time.
            for (var j = 0; j < markers.length; j++) {
                markers[j].getOptions().popup.close();
            }

            //Toggle the current popup.
            m.togglePopup();
        }

        function tooltipCallback(marker, sliceIdx) {
            return `${legend[sliceIdx]}: ${marker.getSliceValue(sliceIdx)} (${marker.getSlicePercentage(sliceIdx)}%)`;
        }

        function getMarkerPopupContent(marker) {
            var options = marker.getOptions();
            var desc = ['<div class="popup"><div class="popup-title">', marker.properties.name, '</div><table cellpadding="0"><tr><td><b>Category</b></td><td><b>Value</b></td></tr>'];

            for (var i = 0; i < options.values.length; i++) {
                desc.push('<tr><td width="80px"><span style="color:', options.colors[i], '">', legend[i], '</span></td><td>', options.values[i], '</td></tr>');
            }

            desc.push('</table></div>');

            return desc.join('');
        }
    </script>
    <style>
        .popup-title{
            font-weight:bold;
            font-size:14px;
        }

        .popup {
            padding: 10px;
        }
    </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>Pie Chart HTML Markers</legend>
        This sample shows how to create a pie chart using an HTML marker.
        Click on a marker to view the all the data for each piece of a pie in a chart.
        This samples uses the PieChartMarker class from the open source <a href="https://github.com/Azure-Samples/azure-maps-html-marker-layer" target="_blank">Azure Maps HTML Marker Layer module</a>.
    </fieldset>
</body>
</html>