This repository has been archived by the owner on May 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 127
/
USA Map.html
108 lines (96 loc) · 11.2 KB
/
USA Map.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>USA Map - Bing Maps 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="Shows all USA states on a single map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
<meta name="author" content="Microsoft Bing Maps" />
<meta name="screenshot" content="screenshot.jpg" />
<script>
var mainMap, alaskaMap, hawaiiMap;
function GetMap() {
mainMap = new Microsoft.Maps.Map('#mainMap', {
maxBounds: Microsoft.Maps.LocationRect.fromEdges(50, -128, 23, -66),
center: new Microsoft.Maps.Location(37, -90),
zoom: 3,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
alaskaMap = new Microsoft.Maps.Map('#alaskaMap', {
showDashboard: false,
showMapTypeSelector: false,
showLocateMeButton: false,
showScalebar: false,
showTermsLink: false,
showZoomButtons: false,
maxBounds: Microsoft.Maps.LocationRect.fromEdges(70, -180, 54, -129),
center: new Microsoft.Maps.Location(58, -155),
zoom: 2,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
hawaiiMap = new Microsoft.Maps.Map('#hawaiiMap', {
showDashboard: false,
showMapTypeSelector: false,
showLocateMeButton: false,
showScalebar: false,
showTermsLink: false,
showZoomButtons: false,
maxBounds: Microsoft.Maps.LocationRect.fromEdges(22.3, -159.9, 18, -154.7),
center: new Microsoft.Maps.Location(20, -157),
zoom: 5,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
Microsoft.Maps.loadModule('Microsoft.Maps.WellKnownText', loadMask);
}
function loadMask() {
var MainlandUSAMask = "POLYGON ((-180 -85, 0 -85, 180 -85, 180 85, 0 85, -180 85, -180 -85), (-81.812 24.549, -81.567 24.97, -81.536 25.495, -81.838 26.143, -82.183 26.5, -82.325 26.885, -82.765 27.586, -82.855 27.875, -82.757 28.421, -82.834 28.859, -82.989 29.113, -83.506 29.629, -83.947 29.864, -84.402 29.868, -85.043 29.592, -85.357 29.676, -85.56 29.976, -85.848 30.196, -86.376 30.362, -86.967 30.359, -88.178 30.208, -88.507 30.097, -88.779 29.879, -88.976 29.534, -89.024 29.139, -89.177 29.028, -89.802 29.172, -90.346 29.058, -90.831 29.047, -91.6 29.424, -92.666 29.586, -93.16 29.75, -94.128 29.633, -94.616 29.41, -95.392 28.862, -96.171 28.513, -96.957 27.958, -97.257 27.494, -97.354 27.13, -97.147 25.942, -97.422 25.836, -97.731 26.004, -98.205 26.054, -98.589 26.25, -99.081 26.396, -99.26 26.783, -99.45 27.018, -99.623 27.503, -100.205 28.197, -100.667 29.067, -100.851 29.265, -101.375 29.621, -101.785 29.783, -102.265 29.749, -102.616 29.551, -103.115 28.988, -103.308 29.024, -104.039 29.321, -104.509 29.639, -104.678 29.926, -104.779 30.307, -104.954 30.558, -105.932 31.324, -106.596 31.723, -106.923 31.78, -107.61 31.753, -107.94 31.604, -108.206 31.331, -111.064 31.329, -115.135 32.636, -115.444 32.661, -117.093 32.534, -117.37 32.784, -117.676 32.906, -118.004 32.922, -118.429 32.814, -118.602 33.031, -118.751 33.509, -119.064 33.826, -119.433 33.968, -120.121 33.898, -120.449 34.034, -120.824 35.155, -121.524 36.002, -121.901 36.309, -122.063 36.807, -122.403 37.194, -122.571 37.623, -122.781 37.854, -123.02 37.997, -123.108 38.298, -123.261 38.531, -123.723 38.916, -123.927 39.812, -124.104 40.065, -124.36 40.261, -124.383 40.51, -124.193 40.927, -124.148 41.396, -124.56 42.837, -124.143 43.94, -123.973 45.645, -124.084 46.271, -124.097 46.751, -124.394 47.591, -124.672 47.965, -124.732 48.162, -124.708 48.465, -124.52323706872504 48.430635879932233, -123.59619 48.22833, -123.20618 48.27954, -123.14575 48.36355, -123.25012 48.68008, -123.00842 48.81048, -123.31052868938798 48.99192916606998, -123.304 49.001, -95.942 48.999, -95.508 49.098, -95.153 49.383, -94.816 49.32, -94.59 48.948, -94.189 48.692, -93.6 48.576, -93.088 48.626, -92.647 48.545, -91.58 48.138, -91.23 48.138, -90.843 48.243, -90.575 48.134, -90.136 48.111, -89.802 48.008, -89.344 48.01, -88.369 48.305, -84.872 46.894, -84.484 46.609, -84.129 46.529, -83.856 46.234, -83.434 45.998, -83.154 45.654, -82.52 45.335, -82.123 43.59, -82.14657027294389 43.462357906513745, -82.68311 42.46399, -83.12256 42.28544, -83.12256 41.91045, -82.57324 41.6565, -80.90332 42.26918, -80.9089855369103 42.2755377643701, -80.512 42.329, -79.725 42.557, -79.465 42.759, -79.321 42.961, -79.2 43.449, -78.708 43.627, -77.209 43.632, -76.844 43.721, -76.576 43.901, -76.312 44.198, -75.863 44.409, -75.273 44.852, -74.972 44.983, -72.08 45.008, -71.679 45.092, -71.301 45.295, -70.936 45.386, -70.604 45.62, -70.406 45.87, -70.292 46.191, -70.101 46.431, -69.996 46.694, -69.224 47.459, -68.667 47.307, -68.231 47.353, -67.79 47.066, -67.697 45.97, -66.932 44.83, -67.263 44.626, -68.293 44.253, -68.614 44.015, -69.034 44.007, -69.681 43.787, -70.182 43.439, -70.361 43.119, -70.409 42.695, -70.305 42.344, -69.941 41.797, -69.968 41.272, -70.016 41.236, -70.497 41.326, -71.211 41.305, -72.452 40.847, -73.425 40.591, -73.814 40.353, -73.996 40.107, -74.149 39.675, -74.901 38.869, -75.244 38.035, -75.553 37.651, -75.852 37.078, -75.869 36.549, -75.467 35.569, -75.532 35.222, -76.04 35.016, -76.533 34.602, -76.974 34.647, -77.376 34.51, -77.759 34.226, -77.967 33.843, -78.392 33.866, -78.777 33.719, -79.015 33.503, -79.241 33.13, -80.637 32.221, -81.105 31.663, -81.402 30.997, -81.4 30.394, -81.179 29.614, -80.528 28.464, -80.511 27.997, -80.071 26.944, -80.032 26.57, -80.176 25.516, -80.38 25.121, -80.579 24.947, -81.093 24.918, -81.525 24.637, -81.812 24.549))";
var AlaskaMask = "POLYGON ((160 49, -110 49, -110 85, 160 85, 160 49), (-164.785 54.404, -164.942 54.572, -163.848 55.039, -162.87 55.348, -161.804 55.894, -160.563 56.008, -160.07 56.418, -158.684 57.016, -158.461 57.216, -157.722 57.57, -157.55 58.328, -157.041 58.918, -158.194 58.615, -158.517 58.787, -159.058 58.424, -159.711 58.931, -159.981 58.572, -160.355 59.071, -161.355 58, -161.968 58.671, -162.054 59.266, -161.874 59.633, -162.518 59.989, -163.818 59.798, -164.662 60.267, -165.346 60.507, -165.35 61.073, -166.121 61, -165.734 62.075, -164.919 62.633, -164.562 63.146, -163.753 63.219, -163.067 63.059, -162.26 63.541, -161.534 63.455, -160.772 63.766, -160.958 64.222, -161.518 64.402, -160.777 64.788, -161.391 64.777, -162.453 64.559, -162.757 64.338, -163.546 64.559, -164.96 64.446, -166.425 64.686, -166.845 65.088, -168.11 65.67, -166.705 66.088, -164.474 66.576, -163.652 66.576, -163.788 66.077, -161.677 66.116, -162.489 66.735, -163.719 67.116, -164.43 67.616, -165.39 68.042, -166.764 68.358, -166.204 68.883, -164.43 68.915, -163.168 69.371, -162.93 69.858, -161.908 70.333, -160.934 70.447, -159.039 70.891, -158.119 70.824, -156.58 71.357, -155.067 71.147, -154.344 70.696, -153.9 70.889, -152.21 70.829, -152.27 70, -150.739 70, -149.72 70, -147.613 70.214, -145.689 70, -144.92 69.989, -143.589 70.152, -142.072 69.851, -140.985 69.712, -140.992 66, -140.997 60.306, -140.013 60.276, -139.039 60, -138.34 59.562, -137.452 58.905, -136.479 59.463, -135.475 59.787, -134.945 59, -134.271 58.861, -133.355 58, -132.73 57.692, -131.707 56.552, -130.007 55.915, -129.979 55.285, -130.536 54.802, -131.085 55.178, -131.967 55.497, -132.25 56.37, -133.539 57.178, -134.078 58.123, -135.038 58.187, -136.628 58.212, -137.8 58.5, -139.867 59.537, -140.825 59.727, -142.574 60.084, -143.958 59.999, -145.925 60.458, -147.114 60.884, -148.224 60.672, -148.018 59.978, -148.57 59.914, -149.727 59.705, -150.608 59.368, -151.716 59.155, -151.859 59.744, -151.409 60.725, -150.346 61.033, -150.621 61.284, -151.895 60.727, -152.578 60.061, -154.019 59, -153.287 58.864, -154.232 58.146, -155.307 57.727, -156.308 57.422, -156.556 56.979, -158.117 56.463, -158.433 55.994, -159.603 55.566, -160.289 55.643, -161.223 55.364, -162.237 55.024, -163.069 54.689, -164.785 54.404), (-154.005 56.734, -154.516 56.992, -154.67 57.461, -153.762 57.816, -153.228 57.968, -152.564 57.901, -152.141 57.591, -153.006 57.115, -154.005 56.734), (-166.192 59.754, -166.848 59.941, -167.455 60.213, -166.467 60.384, -165.674 60.293, -165.579 59.909, -166.192 59.754), (-169.529 62.976, -170.29 63.194, -170.671 63.375, -171.553 63.317, -171.791 63.405, -171.731 63.782, -171.114 63.592, -170.491 63.694, -169.682 63.431, -168.689 63.297, -168.771 63.188, -169.529 62.976))";
var HawaiiMask = "POLYGON ((-180 0, -130 0, -130 33, -180 33, -180 0), (-155.688 18.916, -155.936 19.059, -155.908 19.338, -156.073 19.702, -156.023 19.814, -155.85 19.977, -155.919 20.173, -155.861 20.267, -155.785 20.248, -155.402 20.079, -155.224 19.993, -155.062 19.859, -154.807 19.508, -154.831 19.453, -155.222 19.239, -155.542 19.083, -155.688 18.916), (-156.414 20.572, -156.586 20.783, -156.701 20.864, -156.71 20.926, -156.612 21.012, -156.257 20.917, -155.995 20.764, -156.079 20.643, -156.414 20.572), (-156.789 21.068, -157.325 21.097, -157.25 21.219, -156.758 21.176, -156.789 21.068), (-157.707 21.264, -157.778 21.277, -158.126 21.312, -158.253 21.539, -158.292 21.579, -158.025 21.716, -157.941 21.652, -157.652 21.322, -157.707 21.264), (-159.463 21.882, -159.8 22.065, -159.748 22.138, -159.596 22.236, -159.365 22.214, -159.345 21.982, -159.463 21.882))";
mainMap.entities.push(Microsoft.Maps.WellKnownText.read(MainlandUSAMask, { polygonOptions: { fillColor: 'rgb(0, 0, 0)', strokeColor: 'transparent' } }));
alaskaMap.entities.push(Microsoft.Maps.WellKnownText.read(AlaskaMask, { polygonOptions: { fillColor: 'rgb(0, 0, 0)', strokeColor: 'transparent' } }));
hawaiiMap.entities.push(Microsoft.Maps.WellKnownText.read(HawaiiMask, { polygonOptions: { fillColor: 'rgb(0, 0, 0)', strokeColor: 'transparent' } }));
}
</script>
<style>
.mapContainer, #mainMap{
position:relative;
width:800px;
height:600px;
overflow: hidden;
}
#alaskaMap {
position:absolute;
bottom:-30px;
left:50px;
width:200px;
height:200px;
}
#hawaiiMap {
position:absolute;
bottom:-30px;
left:250px;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="mapContainer">
<div id="mainMap"></div>
<div id="alaskaMap"></div>
<div id="hawaiiMap"></div>
</div>
<script>
// Dynamic load the Bing Maps Key and Script
// Get your own Bing Maps key at https://www.microsoft.com/maps
(async () => {
let script = document.createElement("script");
let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
document.body.appendChild(script);
})();
</script>
</body>
</html>