AzureMapsCodeSamples/Samples/Polygons/Polygon labels - symbol layer/Polygon labels - symbol layer.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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Polygon labels - symbol layer - 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 the symbol layer can be used to automatically render labels for polygons on the map. " />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, template, fill pattern, polygonlayer" />
    <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;

        var data = [
            {
                "type": "Feature",
                "properties": {
                    "label": "Polygon 1"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[-102.54364, 42.50045], [-102.14263, 42.49235], [-102.27722, 42.66830], [-102.54364, 42.50045]]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "label": "Polygon 2"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[-100.89294, 42.73490], [-100.91766, 42.46601], [-100.40954, 42.47412], [-100.39581, 42.56521], [-100.72814, 42.57533], [-100.71990, 42.73692], [-100.89294, 42.73490]]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "label": "Polygon 3"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[-101.00555, 41.72828], [-100.92041, 41.61954], [-100.24749, 41.96561], [-100.39306, 42.10637], [-101.00555, 41.72828]]
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "label": "Polygon 4"
                },
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [[[-102.69744, 41.70777], [-102.10144, 41.70777], [-102.10144, 41.95540], [-102.69744, 41.95540], [-102.69744, 41.70777]]
                    ]
                }
            }
        ];

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-101.4285, 42.1695],
                zoom: 8,
                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 () {
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

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

                map.layers.add([
                    //Create a layer to render the polygon data.
                    new atlas.layer.PolygonLayer(datasource),

                    //Create a layer to render the label of the polygon.
                    new atlas.layer.SymbolLayer(datasource, null, {
                        iconOptions: {
                            //Hide the default image.
                            image: 'none'
                        },
                        textOptions: {
                            //Reference the label property of the polygon as the text field.
                            textField: ['get', 'label']
                        }
                    })
                ]);
            });
        }
    </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>Polygon labels - symbol layer</legend>
        This sample shows how the symbol layer can be used to automatically render labels for polygons on the map.
    </fieldset>
</body>
</html>