-
Notifications
You must be signed in to change notification settings - Fork 457
/
Copy pathCustom styled legend.html
141 lines (122 loc) · 5.81 KB
/
Custom styled legend.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom styled legend - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<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 custom styled legend using CSS." />
<meta name="keywords" content="Microsoft maps, maps, map, API, SDK, GIS, legend, legend control" />
<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.js"></script>
<!-- Load in the JavaScript and CSS files that has our custom control. -->
<link rel="stylesheet" href="/lib/azure-maps/azure-maps-layer-legend.min.css" type="text/css" />
<script src="/lib/azure-maps/azure-maps-layer-legend.min.js"></script>
<script>
var map, legend;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
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 () {
//Add the custom control to the map.
legend = new atlas.control.LegendControl({
//Global title to display for the legend.
title: 'My Legend',
//Hide the button to collapse the legend.
showToggle: false,
//All legend cards to display within the legend control.
legends: [
{
type: 'category',
subtitle: 'Category',
layout: 'column',
itemLayout: 'row',
footer: 'A category legend that uses a combination of shapes and icons.',
strokeWidth: 2,
items: [
{
color: 'DodgerBlue',
label: 'label1',
//Url to an image.
shape: '/images/icons/campfire.png',
alt: 'Campfire'
}, {
color: 'Yellow',
label: 'label2',
shape: 'square'
}, {
color: 'Orange',
label: 'Ricky',
shape: 'line'
}, {
color: 'Red',
label: 'is',
shape: 'circle'
}, {
color: 'purple',
label: 'awesome!',
shape: 'triangle'
}
]
}
]
});
//Add the legend control to the map.
map.controls.add(legend, {
position: 'bottom-left'
});
});
}
</script>
<style>
.atlas-legend-control {
color: white !important;
background-color: rgb(24 42 64 / 95%) !important;
box-shadow: 0px 0px 10px 5px #00c4ffb5 inset !important;
padding: 10px;
border-radius: 30px 5px 30px 5px !important;
}
.atlas-legend-control-container {
background-color: transparent !important;
}
.darkText {
color: black;
text-shadow: white 0 0 2px;
}
.lightText {
color: white;
text-shadow: black 0 0 2px;
}
</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>
Custom styled legend
</legend>
This sample shows how to create a custom styled legend using CSS.
This sample uses the open source <a href="https://github.com/Azure-Samples/azure-maps-layer-legend" target="_blank">Azure Maps Layer & Legend Control module</a>
</fieldset>
<div id="outsidePanel"></div>
</body>
</html>