forked from devangpradhan/GSDM
-
Notifications
You must be signed in to change notification settings - Fork 0
/
maps.html
123 lines (110 loc) · 4.04 KB
/
maps.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
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps with State Selector</title>
<meta charset="utf-8">
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://unpkg.com/shpjs@latest/dist/shp.min.js"></script>
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet">
<style>
#myMap {
width: 100%;
height: 600px;
}
#stateSelector {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
background: white;
padding: 5px;
}
</style>
</head>
<body>
<div id="stateSelector">
<label for="states">Select a state:</label>
<select id="states">
<option value="">--Select--</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Karnataka">Karnataka</option>
<option value="Gujarat">Gujarat</option>
<!-- Add more states as needed -->
</select>
</div>
<div id="myMap"></div>
<script>
// Your Azure Maps subscription key
var subscriptionKey = 'FRGNrro5pxHlWyTnZ9LYuPUX7CKbaLykA7Q47B2hjjrloCgaicTDJQQJ99AHACYeBjFx21kdAAAgAZMP6dr9';
// Initialize the map
var map = new atlas.Map('myMap', {
center: [78.9629, 20.5937], // Center on India
zoom: 4,
language: 'en-US',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
}
});
// Add a control to the map
map.events.add('ready', function () {
map.controls.add(new atlas.control.ZoomControl(), {
position: 'top-right'
});
});
// Create a data source to hold the polygon for the state
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
// Add a layer to display the polygon
var polygonLayer = new atlas.layer.PolygonLayer(dataSource, null, {
fillColor: 'rgba(255, 165, 0, 0.5)' // Highlight color for the state
});
map.layers.add(polygonLayer);
// State coordinates data (for demonstration purposes)
var stateCoordinates = {
"Maharashtra": [
[72.8777, 19.0760],
[73.8478, 18.5204],
[74.2094, 16.7061],
[73.7681, 15.3173],
[72.8777, 19.0760]
],
"Karnataka": [
[77.5946, 12.9716],
[75.8064, 15.3173],
[74.1240, 15.2993],
[74.6197, 16.3700],
[77.5946, 12.9716]
],
"Gujarat": [
[72.8311, 21.1702],
[70.8022, 22.2735],
[70.7832, 22.2587],
[72.8277, 23.0338],
[72.8311, 21.1702]
]
};
// Function to highlight the selected state
function highlightState(state) {
dataSource.clear(); // Clear any existing polygons
if (state && stateCoordinates[state]) {
var coordinates = stateCoordinates[state];
var polygon = new atlas.data.Polygon([coordinates]);
dataSource.add(new atlas.data.Feature(polygon));
// Calculate the bounding box to fit the polygon within the map view
var bbox = atlas.data.BoundingBox.fromData(coordinates);
// Set the map's camera to center and zoom based on the bounding box
map.setCamera({
bounds: bbox,
padding: 50 // Optional: Add padding around the polygon
});
}
}
// Add event listener for the dropdown
document.getElementById('states').addEventListener('change', function() {
var selectedState = this.value;
highlightState(selectedState);
});
</script>
</body>
</html>