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
/
North Carolina Map.html
99 lines (85 loc) · 12.8 KB
/
North Carolina 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>North Carolina 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="This code sample shows how to create a map that is focused on a single area. In this case North Carolina." />
<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 map, maskPolygon, trafficManager;
function GetMap() {
var northCarolinaBounds = Microsoft.Maps.LocationRect.fromEdges(36.696506, -84.362822, 33.794559, -75.117827);
map = new Microsoft.Maps.Map('#myMap', {
maxBounds: northCarolinaBounds,
bounds: northCarolinaBounds,
//Some alternate map styles to consider using which may make it easier to view traffic data.
mapTypeId: Microsoft.Maps.MapTypeId.grayscale,
//mapTypeId: Microsoft.Maps.MapTypeId.canvasDark,
//Using this feature will put the labels below the polygon mask, but will also clip NC labels that overflow outside of the state boundary.
//liteMode: true
});
Microsoft.Maps.loadModule(['Microsoft.Maps.Traffic', 'Microsoft.Maps.WellKnownText'], function () {
loadMask();
trafficManager = new Microsoft.Maps.Traffic.TrafficManager(map);
trafficManager.show();
});
}
function loadMask() {
//A polygon that covers the globe, but has a hole cut out in the shape of North Carolina. Boundary of North Carolina has been buffered by about 1km as original boundary was clipping some islands.
var northCarolinaMask = 'POLYGON((-90 30,-70 30,-70 40,-90 40,-90 30),(-84.33074 34.98985,-84.29547 35.20719,-84.29209 35.22802,-84.29175 35.2294,-84.2912 35.2307,-84.29045 35.23191,-84.28953 35.23298,-84.28844 35.23389,-84.22894 35.27639,-84.22781 35.27708,-84.22659 35.27759,-84.2253 35.27792,-84.22399 35.27806,-84.22266 35.278,-84.22136 35.27775,-84.22011 35.27731,-84.21894 35.27669,-84.17628 35.24988,-84.10052 35.25614,-84.03402 35.29964,-84.03392 35.29971,-84.04674 35.34596,-84.047 35.34727,-84.04706 35.3486,-84.04693 35.34993,-84.0466 35.35122,-84.04608 35.35245,-84.04539 35.35359,-84.04453 35.35461,-84.04353 35.3555,-84.01845 35.37467,-84.03013 35.40411,-84.03053 35.40539,-84.03074 35.40672,-84.03074 35.40807,-84.03054 35.4094,-84.03015 35.41069,-84.02957 35.4119,-84.02881 35.41301,-84.02789 35.414,-83.97928 35.45916,-83.97789 35.46023,-83.97631 35.461,-83.96202 35.46632,-83.95626 35.46848,-83.95625 35.46849,-83.92092 35.48166,-83.85349 35.52673,-83.85288 35.5271,-83.77612 35.56996,-83.77488 35.57054,-83.77356 35.57092,-83.77221 35.57109,-83.66336 35.57677,-83.65363 35.57728,-83.65297 35.57729,-83.58764 35.57594,-83.58743 35.57593,-83.50152 35.57211,-83.45833 35.6097,-83.45724 35.61051,-83.45604 35.61115,-83.45476 35.6116,-83.42532 35.61949,-83.35222 35.66796,-83.35097 35.66865,-83.34962 35.66914,-83.34821 35.6694,-83.34677 35.66944,-83.30159 35.66699,-83.27194 35.70846,-83.2635 35.72028,-83.26349 35.7203,-83.26265 35.72147,-83.26174 35.72255,-83.26067 35.72347,-83.25946 35.72422,-83.25816 35.72476,-83.25679 35.7251,-83.20265 35.73388,-83.16799 35.76961,-83.16697 35.77052,-83.16583 35.77125,-83.16459 35.77181,-83.16328 35.77217,-83.09911 35.78485,-83.05062 35.79645,-83.04926 35.79666,-83.04788 35.79667,-82.98209 35.79188,-82.97317 35.80162,-82.94427 35.83316,-82.90937 35.8769,-82.9194 35.9251,-82.91958 35.92647,-82.91955 35.92785,-82.9193 35.92921,-82.91885 35.93052,-82.9182 35.93174,-82.91737 35.93285,-82.91638 35.93381,-82.91526 35.93462,-82.91402 35.93524,-82.89728 35.94212,-82.86413 35.95574,-82.86289 35.95615,-82.8616 35.95637,-82.8603 35.9564,-82.859 35.95625,-82.85774 35.9559,-82.85654 35.95538,-82.81775 35.93499,-82.79573 35.95663,-82.78821 35.99427,-82.78783 35.99561,-82.78725 35.99688,-82.78648 35.99804,-82.78554 35.99907,-82.78445 35.99994,-82.78324 36.00063,-82.7289 36.02632,-82.72877 36.02638,-82.63207 36.07029,-82.63075 36.07077,-82.62936 36.07104,-82.62795 36.07108,-82.62655 36.07091,-82.62519 36.07052,-82.62391 36.06991,-82.62274 36.06912,-82.62171 36.06815,-82.59909 36.04328,-82.58888 36.03206,-82.58806 36.03102,-82.58741 36.02987,-82.58693 36.02865,-82.58664 36.02736,-82.58654 36.02605,-82.58663 36.02473,-82.58691 36.02345,-82.5999 35.97982,-82.55858 35.96381,-82.51228 35.98992,-82.4707 36.01336,-82.42425 36.07818,-82.41676 36.08864,-82.41584 36.08974,-82.41475 36.09067,-82.41353 36.09142,-82.35093 36.12322,-82.34999 36.12363,-82.30079 36.14193,-82.29924 36.14235,-82.29763 36.14249,-82.29603 36.14234,-82.26731 36.13704,-82.22475 36.16159,-82.21574 36.16679,-82.21438 36.16743,-82.21294 36.16783,-82.21144 36.16799,-82.20995 36.1679,-82.20848 36.16756,-82.13808 36.14477,-82.13668 36.14417,-82.13539 36.14335,-82.13426 36.14232,-82.13332 36.14112,-82.1326 36.13977,-82.12131 36.11357,-82.08183 36.11466,-82.03459 36.13176,-81.96759 36.23308,-81.96745 36.2333,-81.94172 36.26989,-81.9258 36.29252,-81.91549 36.30718,-81.91471 36.30814,-81.9138 36.30898,-81.91279 36.3097,-81.83785 36.35503,-81.83656 36.35567,-81.83519 36.3561,-81.83376 36.35631,-81.83232 36.35628,-81.76836 36.35001,-81.71918 36.34802,-81.73364 36.3862,-81.74271 36.41016,-81.74312 36.41157,-81.74329 36.41303,-81.74322 36.4145,-81.74291 36.41593,-81.74237 36.4173,-81.74162 36.41856,-81.70449 36.47052,-81.70892 36.53623,-81.7089 36.53766,-81.70866 36.53907,-81.70819 36.54043,-81.68577 36.59172,-81.68514 36.59291,-81.68433 36.594,-81.68337 36.59495,-81.68228 36.59575,-81.68108 36.59638,-81.6798 36.59681,-81.67847 36.59705,-81.67712 36.59709,-81.49951 36.5888,-81.35291 36.58522,-81.17649 36.58091,-81.17633 36.5809,-81.06153 36.576,-80.9017 36.57073,-80.84024 36.57091,-80.70486 36.5713,-80.70443 36.57129,-80.61179 36.56719,-80.4397 36.55957,-80.43121 36.55919,-80.4312 36.55919,-80.29501 36.55295,-80.0534 36.55162,-80.02723 36.55148,-79.89154 36.55101,-79.71483 36.55041,-79.51094 36.54972,-79.51066 36.54972,-79.47017 36.54982,-79.3427 36.55012,-79.21866 36.55042,-79.13796 36.55062,-78.94203 36.55109,-78.94199 36.55109,-78.79628 36.55074,-78.7341 36.55059,-78.50998 36.55005,-78.4575 36.55043,-78.32371 36.5514,-78.13298 36.55279,-78.13295 36.55279,-78.04624 36.55318,-77.89981 36.55383,-77.76714 36.55442,-77.74975 36.5545,-77.74972 36.5545,-77.29878 36.55502,-77.19018 36.55514,-77.19017 36.55514,-77.16435 36.55513,-76.91743 36.55503,-76.9163 36.55506,-76.916 36.55507,-76.91598 36.55507,-76.73858 36.55996,-76.73832 36.55996,-76.54159 36.55976,-76.49147 36.55971,-76.3132 36.55953,-76.02676 36.55953,-75.86705 36.55973,-75.86556 36.55961,-75.86412 36.55924,-75.86275 36.55864,-75.86151 36.55783,-75.86041 36.55681,-75.8595 36.55563,-75.8588 36.55432,-75.85832 36.5529,-75.82976 36.43723,-75.78795 36.29343,-75.76243 36.23571,-75.71037 36.11794,-75.65098 36.02528,-75.65072 36.02485,-75.56197 35.86772,-75.56188 35.86756,-75.51114 35.77343,-75.48827 35.73294,-75.4878 35.73198,-75.48745 35.73097,-75.45002 35.59905,-75.44976 35.59784,-75.44968 35.59661,-75.44976 35.59538,-75.47787 35.39043,-75.47813 35.38921,-75.52499 35.22339,-75.52547 35.22208,-75.52614 35.22086,-75.527 35.21977,-75.52802 35.21882,-75.52917 35.21803,-75.53043 35.21744,-75.53176 35.21704,-75.53314 35.21686,-75.63392 35.21135,-75.74695 35.17702,-75.75491 35.17461,-75.90903 35.11152,-76.0086 35.05411,-76.132 34.98054,-76.22723 34.89867,-76.22799 34.89808,-76.30466 34.84522,-76.38048 34.77818,-76.44337 34.70888,-76.52852 34.58353,-76.52937 34.58247,-76.53036 34.58154,-76.53149 34.58078,-76.53272 34.5802,-76.53402 34.57981,-76.53537 34.57962,-76.53673 34.57963,-76.53807 34.57985,-76.53936 34.58027,-76.54058 34.58088,-76.54169 34.58167,-76.54267 34.58262,-76.54349 34.5837,-76.54414 34.58489,-76.56096 34.62226,-76.62236 34.66416,-76.72762 34.68763,-76.90496 34.67391,-77.11106 34.62931,-77.13407 34.62434,-77.23676 34.57956,-77.31769 34.52799,-77.31878 34.5274,-77.45858 34.46346,-77.51033 34.42985,-77.62958 34.35239,-77.70756 34.28352,-77.75746 34.23945,-77.82147 34.15793,-77.88891 34.00881,-77.90724 33.96828,-77.92642 33.91738,-77.95176 33.85015,-77.9524 33.84881,-77.95325 33.84759,-77.95429 33.84653,-77.95549 33.84565,-77.95682 33.84498,-77.95824 33.84455,-77.95971 33.84435,-77.9612 33.8444,-78.00779 33.84978,-78.00914 33.85004,-78.01043 33.8505,-78.01164 33.85116,-78.01274 33.85199,-78.01369 33.85298,-78.01448 33.85411,-78.01509 33.85534,-78.02521 33.88044,-78.13785 33.9032,-78.27572 33.90338,-78.38212 33.8931,-78.53832 33.84256,-78.5396 33.84225,-78.54091 33.84213,-78.54222 33.8422,-78.5435 33.84246,-78.54474 33.8429,-78.5459 33.84352,-78.54695 33.8443,-78.62176 33.90869,-78.65669 33.93821,-78.8175 34.07414,-79.07695 34.29237,-79.07702 34.29242,-79.36409 34.53847,-79.45597 34.61366,-79.46766 34.62322,-79.67856 34.7958,-79.69306 34.79598,-79.92442 34.79884,-79.92445 34.79884,-79.92772 34.79889,-80.07733 34.80074,-80.07736 34.80074,-80.32056 34.80463,-80.56181 34.8085,-80.56191 34.8085,-80.62602 34.81024,-80.79724 34.81489,-80.7986 34.81503,-80.79993 34.81538,-80.80118 34.81592,-80.80234 34.81665,-80.80338 34.81754,-80.80426 34.81858,-80.80498 34.81975,-80.80551 34.82101,-80.80585 34.82233,-80.80598 34.82369,-80.8059 34.82506,-80.79149 34.93288,-80.84727 34.99549,-80.91295 35.0692,-80.93675 35.09593,-81.03693 35.03696,-81.03821 35.03634,-81.03956 35.03593,-81.04096 35.03573,-81.04238 35.03576,-81.04377 35.03601,-81.0451 35.03648,-81.04635 35.03715,-81.04748 35.038,-81.04845 35.03903,-81.04926 35.04019,-81.0658 35.06868,-81.0664 35.06994,-81.06681 35.07127,-81.067 35.07266,-81.06697 35.07405,-81.06673 35.07542,-81.06628 35.07674,-81.04617 35.12341,-81.0501 35.14059,-81.3285 35.15331,-81.36802 35.15512,-81.49463 35.1609,-81.76841 35.17073,-81.87443 35.17453,-81.96965 35.17795,-82.03991 35.18047,-82.04858 35.18066,-82.21644 35.18428,-82.29554 35.18599,-82.29593 35.18601,-82.3536 35.18974,-82.40921 35.19334,-82.45119 35.16961,-82.45215 35.16914,-82.45316 35.16879,-82.53011 35.14698,-82.53078 35.14682,-82.57593 35.13768,-82.68227 35.11615,-82.74103 35.07195,-82.74227 35.07117,-82.74363 35.0706,-82.74505 35.07025,-82.74652 35.07015,-82.74798 35.07028,-82.76362 35.07302,-82.78292 35.07641,-82.89523 35.04733,-83.00615 35.01824,-83.10633 34.99197,-83.10841 34.99168,-83.32253 34.98689,-83.48242 34.9819,-83.5489 34.97982,-83.6197 34.97761,-83.62001 34.97761,-83.93644 34.9785,-83.93678 34.9785,-83.93685 34.97851,-84.00553 34.97867,-84.12946 34.97897,-84.32189 34.97943,-84.3233 34.97954,-84.32467 34.97987,-84.32597 34.98042,-84.32717 34.98116,-84.32824 34.98208,-84.32915 34.98315,-84.32989 34.98436,-84.33042 34.98566,-84.33075 34.98704,-84.33085 34.98844,-84.33074 34.98985))';
maskPolygon = Microsoft.Maps.WellKnownText.read(northCarolinaMask, { polygonOptions: { strokeColor: 'transparent' } });
colorizeMask();
map.entities.push(maskPolygon);
//Change the color of the polygon mask so that it blends with the map style.
Microsoft.Maps.Events.addHandler(map, 'maptypechanged', colorizeMask);
}
function colorizeMask() {
var fillColor;
switch (map.getMapTypeId()) {
case Microsoft.Maps.MapTypeId.aerial:
fillColor = 'rgb(17, 65, 69)';
break;
case Microsoft.Maps.MapTypeId.canvasDark:
fillColor = 'rgb(51, 51, 51)';
break;
case Microsoft.Maps.MapTypeId.canvasLight:
fillColor = 'rgb(190, 208, 227)';
break;
case Microsoft.Maps.MapTypeId.grayscale:
fillColor = 'rgb(200, 200, 200)';
break;
case Microsoft.Maps.MapTypeId.road:
default:
fillColor = 'rgb(172, 199, 242)';
break;
}
maskPolygon.setOptions({ fillColor: fillColor });
}
</script>
<style>
body, html{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head>
<body>
<div id="myMap"></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>