API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 18th, 2019
278
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.62 KB | None | 0 0
raw download clone embed print report
  1. @{
  2. ViewBag.Title = "Map";
  3.  
  4. }
  5. <!DOCTYPE html>
  6. <html>
  7.  
  8. <head>
  9.  
  10.  
  11. <meta name="viewport" content="initial-scale=1.0">
  12. <meta charset="utf-8">
  13. <style>
  14. /* Always set the map height explicitly to define the size of the div
  15. * element that contains the map. */
  16. #map {
  17. position: absolute;
  18. width: 100%;
  19. height: 100%;
  20. top: 0;
  21. left: 0;
  22. bottom: 0;
  23. right: 0;
  24. }
  25. /* Optional: Makes the sample page fill the window. */
  26. html, body {
  27. height: 100%;
  28. margin: 0;
  29. padding: 0;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="navbar navbar-inverse navbar-fixed-top">
  35. <div class="container-fluid">
  36. <div class="navbar-header">
  37. <img class="navbar-logo" alt="Brand" src="/Content/Images/TMD_Logo.png">
  38. <div class="navbar-brand">TapeMyDay</div>
  39. </div>
  40. </div>
  41. </div>
  42.  
  43. <div id="swipeAreaLeft" class="swipe-area-left">
  44. @*<span style="color:yellow;margin: 0 5px;">Closed</span>*@
  45. </div>
  46.  
  47. <div id="swipeAreaRight" class="swipe-area-right">
  48. @*<span style="color:yellow;margin: 0 5px;">Closed</span>*@
  49. </div>
  50.  
  51. @*Left Menu*@
  52. <div id="leftMenu" class="left-area">
  53. <div class="left-menu-btn" onclick="navigateToPage('WorldMap')">
  54. <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>World Map
  55. </div>
  56. <div class="left-menu-btn" onclick="navigateToPage('Settings')">
  57. <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>Settings
  58. </div>
  59. </div>
  60.  
  61. @*Right Menu*@
  62. <div id="rightMenu" class="right-area">
  63. <div class="menu-background"></div>
  64. <div class="col-lg-12 right-area-top-buttons">
  65. <div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
  66. </div>
  67.  
  68. @*<div class="col-lg-12 search-bar">
  69. <div class="input-group">
  70. <input type="text" class="form-control" placeholder="Search for...">
  71. <span class="input-group-btn">
  72. <button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
  73. </span>
  74. </div>
  75. </div>*@
  76.  
  77. <div class="col-lg-12 status-bars">
  78. @*OFFLINE PANEL*@
  79. <div class="panel panel-danger">
  80. <div class="panel-heading">
  81. <h3 class="panel-title">Offline</h3>
  82. </div>
  83. <div class="panel-body">
  84. <div class="row col-lg-12 item-group">
  85. <div class="col-lg-6 item-title">Isfanbul</div>
  86. <div class="item-button-group pull-right">
  87. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  88. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  89. </div>
  90. </div>
  91. <div class="row col-lg-12 item-group">
  92. <div class="col-lg-6 item-title">Monolith</div>
  93. <div class="item-button-group pull-right">
  94. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  95. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. @*UNDER CONSTRUCTION PANEL*@
  101. <div class="panel panel-warning">
  102. <div class="panel-heading">
  103. <h3 class="panel-title">Under Construction</h3>
  104. </div>
  105. <div class="panel-body">
  106. <div class="row col-lg-12 item-group">
  107. <div class="col-lg-6 item-title">NCL - Bliss</div>
  108. <div class="item-button-group pull-right">
  109. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  110. <button class="item-button" id="TestButton"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. @*ONLINE PANEL*@
  116. <div class="panel panel-success">
  117. <div class="panel-heading">
  118. <h3 class="panel-title">Online</h3>
  119. </div>
  120. <div class="panel-body">
  121. <div class="row col-lg-12 item-group">
  122. <div class="col-lg-6 item-title">Isfanbul</div>
  123. <div class="item-button-group pull-right">
  124. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  125. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  126. </div>
  127. </div>
  128. <div class="row col-lg-12 item-group">
  129. <div class="col-lg-6 item-title">Monolith</div>
  130. <div class="item-button-group pull-right">
  131. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  132. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  133. </div>
  134. </div>
  135. <div class="row col-lg-12 item-group">
  136. <div class="col-lg-6 item-title">NCL - Bliss</div>
  137. <div class="item-button-group pull-right">
  138. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  139. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  140. </div>
  141. </div>
  142. <div class="row col-lg-12 item-group">
  143. <div class="col-lg-6 item-title">Isfanbul</div>
  144. <div class="item-button-group pull-right">
  145. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  146. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  147. </div>
  148. </div>
  149. <div class="row col-lg-12 item-group">
  150. <div class="col-lg-6 item-title">Monolith</div>
  151. <div class="item-button-group pull-right">
  152. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  153. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  154. </div>
  155. </div>
  156. <div class="row col-lg-12 item-group">
  157. <div class="col-lg-6 item-title">NCL - Bliss</div>
  158. <div class="item-button-group pull-right">
  159. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  160. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  161. </div>
  162. </div>
  163. <div class="row col-lg-12 item-group">
  164. <div class="col-lg-6 item-title">Isfanbul</div>
  165. <div class="item-button-group pull-right">
  166. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  167. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  168. </div>
  169. </div>
  170. <div class="row col-lg-12 item-group">
  171. <div class="col-lg-6 item-title">Monolith</div>
  172. <div class="item-button-group pull-right">
  173. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  174. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  175. </div>
  176. </div>
  177. <div class="row col-lg-12 item-group">
  178. <div class="col-lg-6 item-title">NCL - Bliss</div>
  179. <div class="item-button-group pull-right">
  180. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  181. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  182. </div>
  183. </div>
  184. <div class="row col-lg-12 item-group">
  185. <div class="col-lg-6 item-title">Isfanbul</div>
  186. <div class="item-button-group pull-right">
  187. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  188. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  189. </div>
  190. </div>
  191. <div class="row col-lg-12 item-group">
  192. <div class="col-lg-6 item-title">Monolith</div>
  193. <div class="item-button-group pull-right">
  194. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  195. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  196. </div>
  197. </div>
  198. <div class="row col-lg-12 item-group">
  199. <div class="col-lg-6 item-title">NCL - Bliss</div>
  200. <div class="item-button-group pull-right">
  201. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  202. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  203. </div>
  204. </div>
  205. <div class="row col-lg-12 item-group">
  206. <div class="col-lg-6 item-title">Isfanbul</div>
  207. <div class="item-button-group pull-right">
  208. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  209. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  210. </div>
  211. </div>
  212. <div class="row col-lg-12 item-group">
  213. <div class="col-lg-6 item-title">Monolith</div>
  214. <div class="item-button-group pull-right">
  215. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  216. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  217. </div>
  218. </div>
  219. <div class="row col-lg-12 item-group">
  220. <div class="col-lg-6 item-title">NCL - Bliss</div>
  221. <div class="item-button-group pull-right">
  222. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  223. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  224. </div>
  225. </div>
  226. <div class="row col-lg-12 item-group">
  227. <div class="col-lg-6 item-title">Isfanbul</div>
  228. <div class="item-button-group pull-right">
  229. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  230. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  231. </div>
  232. </div>
  233. <div class="row col-lg-12 item-group">
  234. <div class="col-lg-6 item-title">Monolith</div>
  235. <div class="item-button-group pull-right">
  236. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  237. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  238. </div>
  239. </div>
  240. <div class="row col-lg-12 item-group">
  241. <div class="col-lg-6 item-title">NCL - Bliss</div>
  242. <div class="item-button-group pull-right">
  243. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  244. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  245. </div>
  246. </div>
  247. <div class="row col-lg-12 item-group">
  248. <div class="col-lg-6 item-title">Isfanbul</div>
  249. <div class="item-button-group pull-right">
  250. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  251. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  252. </div>
  253. </div>
  254. <div class="row col-lg-12 item-group">
  255. <div class="col-lg-6 item-title">Monolith</div>
  256. <div class="item-button-group pull-right">
  257. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  258. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  259. </div>
  260. </div>
  261. <div class="row col-lg-12 item-group">
  262. <div class="col-lg-6 item-title">NCL - Bliss</div>
  263. <div class="item-button-group pull-right">
  264. <button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
  265. <button class="item-button"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272.  
  273. <div id="map"></div>
  274. <script>
  275.  
  276. //Create worldmap
  277. var map;
  278. function initMap() {
  279.  
  280. //Set customer latitude and longtitude
  281. var LocationB = { lat: 52.237049, lng: 21.017532 };
  282. var Isfanbul = { lat: 41.009633, lng: 28.965165 };
  283. var Miami = { lat: 25.774266, lng: -80.193659 };
  284. var NewHaven = { lat: 41.308214, lng: -72.925052 };
  285. var JejuIsland = { lat: 33.393992, lng: 126.562665 };
  286.  
  287. //Set center map
  288. var CenterLoc = { lat: 51.34, lng: 5.53 };
  289.  
  290. //Set map settings
  291. map = new google.maps.Map(document.getElementById('map'),
  292. {
  293. center: CenterLoc,
  294. disableDefaultUI: true,
  295. zoom: 3,
  296. styles: [
  297. {
  298. "elementType": "geometry",
  299. "stylers": [
  300. {
  301. "color": "#f5f5f5"
  302. }
  303. ]
  304. },
  305. {
  306. "elementType": "labels.icon",
  307. "stylers": [
  308. {
  309. "visibility": "off"
  310. }
  311. ]
  312. },
  313. {
  314. "elementType": "labels.text.fill",
  315. "stylers": [
  316. {
  317. "color": "#616161"
  318. }
  319. ]
  320. },
  321. {
  322. "elementType": "labels.text.stroke",
  323. "stylers": [
  324. {
  325. "color": "#f5f5f5"
  326. }
  327. ]
  328. },
  329. {
  330. "featureType": "administrative.country",
  331. "elementType": "geometry.stroke",
  332. "stylers": [
  333. {
  334. "color": "#a7a7a7"
  335. }
  336. ]
  337. },
  338. {
  339. "featureType": "administrative.country",
  340. "elementType": "labels",
  341. "stylers": [
  342. {
  343. "visibility": "off"
  344. }
  345. ]
  346. },
  347. {
  348. "featureType": "administrative.land_parcel",
  349. "elementType": "labels.text.fill",
  350. "stylers": [
  351. {
  352. "color": "#bdbdbd"
  353. }
  354. ]
  355. },
  356. {
  357. "featureType": "administrative.province",
  358. "elementType": "labels",
  359. "stylers": [
  360. {
  361. "visibility": "off"
  362. }
  363. ]
  364. },
  365. {
  366. "featureType": "poi",
  367. "elementType": "geometry",
  368. "stylers": [
  369. {
  370. "color": "#eeeeee"
  371. }
  372. ]
  373. },
  374. {
  375. "featureType": "poi",
  376. "elementType": "labels.text.fill",
  377. "stylers": [
  378. {
  379. "color": "#757575"
  380. }
  381. ]
  382. },
  383. {
  384. "featureType": "poi.park",
  385. "elementType": "geometry",
  386. "stylers": [
  387. {
  388. "color": "#e5e5e5"
  389. }
  390. ]
  391. },
  392. {
  393. "featureType": "poi.park",
  394. "elementType": "labels.text.fill",
  395. "stylers": [
  396. {
  397. "color": "#9e9e9e"
  398. }
  399. ]
  400. },
  401. {
  402. "featureType": "road",
  403. "elementType": "geometry",
  404. "stylers": [
  405. {
  406. "color": "#ffffff"
  407. }
  408. ]
  409. },
  410. {
  411. "featureType": "road.arterial",
  412. "elementType": "labels.text.fill",
  413. "stylers": [
  414. {
  415. "color": "#757575"
  416. }
  417. ]
  418. },
  419. {
  420. "featureType": "road.highway",
  421. "elementType": "geometry",
  422. "stylers": [
  423. {
  424. "color": "#dadada"
  425. }
  426. ]
  427. },
  428. {
  429. "featureType": "road.highway",
  430. "elementType": "labels.text.fill",
  431. "stylers": [
  432. {
  433. "color": "#616161"
  434. }
  435. ]
  436. },
  437. {
  438. "featureType": "road.local",
  439. "elementType": "labels.text.fill",
  440. "stylers": [
  441. {
  442. "color": "#9e9e9e"
  443. }
  444. ]
  445. },
  446. {
  447. "featureType": "transit.line",
  448. "elementType": "geometry",
  449. "stylers": [
  450. {
  451. "color": "#e5e5e5"
  452. }
  453. ]
  454. },
  455. {
  456. "featureType": "transit.station",
  457. "elementType": "geometry",
  458. "stylers": [
  459. {
  460. "color": "#eeeeee"
  461. }
  462. ]
  463. },
  464. {
  465. "featureType": "water",
  466. "elementType": "geometry",
  467. "stylers": [
  468. {
  469. "color": "#c9c9c9"
  470. }
  471. ]
  472. },
  473. {
  474. "featureType": "water",
  475. "elementType": "labels",
  476. "stylers": [
  477. {
  478. "visibility": "off"
  479. }
  480. ]
  481. },
  482. {
  483. "featureType": "water",
  484. "elementType": "labels.text.fill",
  485. "stylers": [
  486. {
  487. "color": "#9e9e9e"
  488. }
  489. ]
  490. }
  491. ]
  492. });
  493.  
  494. //Center button function
  495. function newLocation(newLat, newLng) {
  496. map.setCenter({
  497. lat: newLat,
  498. lng: newLng
  499. });
  500. }
  501.  
  502. google.maps.event.addDomListener(window, 'load', initMap);
  503.  
  504. //Setting location center with jQuery
  505. $(document).ready(function () {
  506. $("TestButton").on('click', function () {
  507. newLocation(48.1293954, 11.556663);
  508. });
  509. });
  510.  
  511. //Define location
  512. var LocationBData = "<p>" + "Location server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Stitch server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Camera server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>";
  513. var IsfanbulStatus = "<p>" + "Location server:" + "<font color = 'red'>" + " OFF" + "</font>" + "<br/>" + "Stitch server:" + "<font color = 'red'>" + " OFF" + "</font>" + "<br/>" + "Camera server:" + "<font color = 'red'>" + " OFF" + "</font>" + "<br/>";
  514. var MiamiStatus = "<p>" + "Location server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Stitch server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Camera server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>";
  515. var NewhavenStatus = "<p>" + "Location server:" + "<font color = 'orange'>" + " Under construction" + "</font>" + "<br/>" + "Stitch server:" + "<font color = 'orange'>" + " Under construction" + "</font>" + "<br/>" + "Camera server:" + "<font color = 'orange'>" + " Under construction" + "</font>" + "<br/>";
  516. var JejuIslandStatus = "<p>" + "Location server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Stitch server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>" + "Camera server:" + "<font color = 'green'>" + " ON" + "</font>" + "<br/>";
  517.  
  518.  
  519. //Create customercard
  520. var KlantenkaartB = new google.maps.InfoWindow
  521. ({
  522. content: LocationBData
  523. });
  524.  
  525. var IsfanbulInfoCard = new google.maps.InfoWindow
  526. ({
  527. content: IsfanbulStatus
  528. });
  529.  
  530. var MiamiInfoCard = new google.maps.InfoWindow
  531. ({
  532. content: MiamiStatus
  533. });
  534.  
  535. var NewhavenInfoCard = new google.maps.InfoWindow
  536. ({
  537. content: NewhavenStatus
  538. });
  539.  
  540. var JejuIslandInfoCard = new google.maps.InfoWindow
  541. ({
  542. content: JejuIslandStatus
  543. });
  544.  
  545. //Markers
  546. var img = "@ViewBag.Image";
  547. var GreenStatus = "@ViewBag.GreenStatus";
  548. var OrangeStatus = "@ViewBag.OrangeStatus";
  549. var RedStatus = "@ViewBag.RedStatus";
  550.  
  551. var markerB = new google.maps.Marker
  552. ({
  553. position: LocationB,
  554. map: map,
  555. icon: GreenStatus
  556. });
  557.  
  558. var IsfanbulMarker = new google.maps.Marker
  559. ({
  560. position: Isfanbul,
  561. map: map,
  562. icon: RedStatus
  563. });
  564.  
  565. var MiamiMarker = new google.maps.Marker
  566. ({
  567. position: Miami,
  568. map: map,
  569. icon: GreenStatus
  570. });
  571.  
  572. var NewHavenMarker = new google.maps.Marker
  573. ({
  574. position: NewHaven,
  575. map: map,
  576. icon: OrangeStatus
  577. });
  578.  
  579. var JejuIslandMarker = new google.maps.Marker
  580. ({
  581. position: JejuIsland,
  582. map: map,
  583. icon: GreenStatus
  584. });
  585.  
  586. //Open Klantenkaart
  587. markerB.addListener('click', function () {
  588. KlantenkaartB.open(map, markerB);
  589. });
  590.  
  591. IsfanbulMarker.addListener('click', function () {
  592. IsfanbulInfoCard.open(map, IsfanbulMarker);
  593. });
  594.  
  595. MiamiMarker.addListener('click', function () {
  596. MiamiInfoCard.open(map, MiamiMarker);
  597. });
  598.  
  599. NewHavenMarker.addListener('click', function () {
  600. NewhavenInfoCard.open(map, NewHavenMarker);
  601. });
  602.  
  603. JejuIslandMarker.addListener('click', function () {
  604. JejuIslandInfoCard.open(map, JejuIslandMarker);
  605. });
  606.  
  607. }
  608. </script>
  609.  
  610. <script src="http://code.jquery.com/jquery.min.js"></script>
  611. <script type="text/javascript" src="~/Scripts/SwipeDetection.js"></script>
  612. <script src="https://maps.googleapis.com/maps/api/js?key=classified&callback=initMap"></script>
  613. </body>
  614. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!