API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 5th, 2016
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
  8. <meta name="mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="description" content="">
  11. <meta name="author" content="">
  12. <title>Franklin County Parcel Map</title>
  13.  
  14. <!-- Core CSS -->
  15. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  16. <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  17. <link href="assets/typeahead.js/typeahead.js-bootstrap.css" rel="stylesheet" type="text/css"> <!--https://github.com/jharding/typeahead.js-bootstrap.css-->
  18. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
  19. <link rel="stylesheet" href="measure/leaflet-measure.css">
  20. <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  21.  
  22. <!-- Personalized font, can add through Google APIs -->
  23. <link href='http://fonts.googleapis.com/css?family=Fenix|Meddon' rel='stylesheet' type='text/css'>
  24. <link href= 'assets/template.css' rel='stylesheet' type='text/css'>
  25.  
  26. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  27. <!--[if lt IE 9]>
  28. <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  29. <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
  30. <![endif]-->
  31. </head>
  32.  
  33. <body>
  34. <div class="navbar navbar-default navbar-fixed-top">
  35. <div class="navbar-header">
  36. <button type="button" class="navbar-toggle btn" data-toggle="collapse" data-target=".navbar-collapse" style="height: 34px; padding: 5px 10px; margin-right: 10px;"><i class="fa fa-ellipsis-v" style="color: #3168a4"></i></button>
  37. <button id="toggle" type="button" class="navbar-toggle btn" style="height: 34px; padding: 5px 10px; margin-right: 10px;"><i id="toggleIcon" class="fa fa-check-square-o" style="color: #3168a4"></i></button>
  38. <!-- Header title -->
  39. <a class="navbar-brand" style="color: #fff" href="#"><i>Franklin County</i></a>
  40. </div>
  41. <div class="navbar-collapse collapse" id="navbar-collapse">
  42. <form class="navbar-form navbar-right">
  43. <div class="input-group search-container">
  44. <input id="searchbox" type="text" class="form-control" placeholder="Search">
  45. <span class="input-group-addon"><i class="fa fa-search"></i></span>
  46. </div>
  47. </form>
  48. <!-- Navigation bar -->
  49. <ul class="nav navbar-nav">
  50. <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="$('#aboutModal').modal('show'); return false;"><i class="fa fa-question-circle" style="color: #fff"></i>&nbsp;&nbsp;<span style="color: black">About</span></a></li>
  51. <li class="dropdown">
  52. <a id="toolsDrop" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe" style="color: #fff"></i>&nbsp;&nbsp;<span style="color: black">Tools</span> <b class="caret"></b></a>
  53. <ul class="dropdown-menu">
  54. <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="map.fitBounds(boroughs.getBounds()); return false;"><i class="fa fa-arrows-alt"></i>&nbsp;&nbsp;Zoom To Full Extent</a></li>
  55. <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" onclick="$('#legendModal').modal('show'); return false;"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Show Legend</a></li>
  56. </ul>
  57. </li>
  58. <!-- <li class="dropdown">
  59. <a id="downloadDrop" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cloud-download" style="color: #3168a4"></i>&nbsp;&nbsp;Download <b class="caret"></b></a>
  60. <ul class="dropdown-menu">
  61. <li><a href="data/ieldran.geojson" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Cemeteries</a></li>
  62. //
  63. </ul>
  64. </li> -->
  65. <li><a href="http://dev2.matrix.msu.edu/~kathryn.meyers/EAS/bootleaf-master/resources.html"><i class="fa fa-file" style="color: #fff"></i>&nbsp;&nbsp;<span style="color: black">Resources</span></a></li>
  66. </ul>
  67. </div><!--/.navbar-collapse -->
  68. </div>
  69.  
  70. <!-- Sidebar -->
  71. <div class="row" id="container">
  72. <div class="col-sm-3 col-lg-3" id="sidebar" style="padding: 10px; overflow: auto;">
  73. <ul class="nav nav-tabs" id="myTab">
  74. <!-- Sidebar navigation -->
  75. <li class ="active" style="color: #3168a4"><a href="#test" data-toggle="tab" style="color: black"><i class="fa fa-spinner"></i>&nbsp;Welcome</a></li>
  76.  
  77. <li><a href="#layers" data-toggle="tab" style="color: black"><i class="fa fa-check-square-o"></i>&nbsp;Layers</a></li>
  78.  
  79.  
  80. </ul>
  81.  
  82. <div class="tab-content" style="padding-top: 10px;">
  83. <div class="tab-pane active" id="test">
  84.  
  85.  
  86. <div class="panel-group">
  87. <!-- First Tab -->
  88. <div class="panel panel-default">
  89. <div class="panel-heading">
  90. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#overlay-test" style="color: #3168a4">
  91. Welcome to the <i>Franklin County</i> Parcel Map
  92. </a>
  93. </div>
  94. <div id="overlay-test" class="panel-collapse collapse in">
  95. <div class="panel-body" style="padding: 0px 15px;">
  96.  
  97.  
  98. <label>
  99. <p>The Early Anglo-Saxon Mapping Project provides locations, summaries, and information about citation and collections for numerous cemeteries from this period. The primary feature is a map that shows locations of cemeteries in England dating from the mid-4th to late 7th century CE. Each site can be clicked on to reveal more information about the cemetery, the burials, associated artifacts, references for books and journal articles written about the cemetery, and where the original excavation materials, human remains, and artifacts are kept.</p>
  100. <p>The Early Anglo-Saxon Mapping Project provides locations, summaries, and information about citation and collections for numerous cemeteries from this period. The primary feature is a map that shows locations of cemeteries in England dating from the mid-4th to late 7th century CE. Each site can be clicked on to reveal more information about the cemetery, the burials, associated artifacts, references for books and journal articles written about the cemetery, and where the original excavation materials, human remains, and artifacts are kept.</p>
  101. </label>
  102.  
  103.  
  104. </div>
  105. </div>
  106. </div>
  107. <!-- Second heading -->
  108. <div class="panel panel-default">
  109. <div class="panel-heading">
  110. <label>
  111. <a style="color: #3168a4">Additional Information </a>
  112. </label>
  113. </div>
  114. <div id="basemap-layers" class="panel-collapse collapse in">
  115. <div class="panel-body" style="padding: 0px 15px;">
  116. <label>
  117. This is a community sourced project. In the near future, you will be able to submit your data to the project, whether it consist of a cemetery we missed, corrections about current data, or additional citations.
  118. </label>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- Third heading -->
  123. <div class="panel panel-default">
  124. <div class="panel-heading">
  125. <label>
  126. <a style="color: #3168a4">License and Attribution </a>
  127. </label>
  128. </div>
  129. <div id="basemap-layers" class="panel-collapse collapse in">
  130. <div class="panel-body" style="padding: 0px 15px;">
  131. <label>
  132. <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title"><i>ieldran</i></span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ieldran.matrix.msu.edu" property="cc:attributionName" rel="cc:attributionURL" style="color: #3168a4">Katy Meyers and Matt Austin</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" style="color: #3168a4">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />
  133. <p>Attribution: Meyers and Austin 2014. <i>ieldran</i>: The Early Anglo-Saxon Mapping Project. <i>Electronic Document</i><a href "http://ieldran.matrix.msu.edu" style="color: #3168a4"> http://ieldran.matrix.msu.edu</a></p>
  134. <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />
  135. </label>
  136. </div>
  137. </div>
  138. </div>
  139.  
  140. </div>
  141. </div>
  142.  
  143.  
  144. <!-- Second tab -->
  145. <div class="tab-pane" id="layers">
  146.  
  147.  
  148. <div class="panel-group">
  149.  
  150. <div class="panel panel-default">
  151. <div class="panel-heading">
  152. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#overlay-layers" style="color: #3168a4">
  153. Navigating the <i>Franklin County</i> parcel map
  154. </a>
  155. </div>
  156. <div id="overlay-layers" class="panel-collapse collapse in">
  157. <div class="panel-body" style="padding: 0px 15px;">
  158.  
  159.  
  160. <label>
  161. This tab will help you dynamically navigate the cemeteries!
  162. </label>
  163.  
  164.  
  165. </div>
  166. </div>
  167. </div>
  168.  
  169. <div class="panel panel-default">
  170. <div class="panel-heading">
  171. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#overlay-layers" style="color: #3168a4">
  172. Overlay Layers
  173. </a>
  174. </div>
  175. <div id="overlay-layers" class="panel-collapse collapse in">
  176. <div class="panel-body" style="padding: 0px 15px;">
  177.  
  178. <div class="text">
  179. <label>
  180. <input type="checkbox" name="overlayLayers" id="cemeteries" z-index="3" checked>
  181. Mixed Cemeteries &nbsp;<img src="img/pin#3168a4.png" width="20" height="28">
  182. </label>
  183.  
  184. </div>
  185. <div class="text">
  186. <label>
  187. <input type="checkbox" name="overlayLayers" id="cremation" z-index="3" checked>
  188. Cremation Cemeteries &nbsp;<img src="img/pin#3168a4.png" width="20" height="28">
  189. </label>
  190.  
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. <div class="panel panel-default">
  196. <div class="panel-heading">
  197. <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_" href="#basemap-layers" style="color: #3168a4">
  198. Basemaps
  199. </a>
  200. </div>
  201. <div id="basemap-layers" class="panel-collapse collapse in">
  202. <div class="panel-body" style="padding: 0px 15px;">
  203. <div class="radio">
  204. <label>
  205. <input type="radio" name="basemapLayersRadio" id="mapboxOSM" checked>
  206. Streets
  207. </label>
  208. </div>
  209. <div class="radio">
  210. <label>
  211. <input type="radio" name="basemapLayersRadio" id="mapboxSAT">
  212. Imagery
  213. </label>
  214. </div>
  215. <div class="radio">
  216. <label>
  217. <input type="radio" name="basemapLayersRadio" id="esriBase">
  218. Topography
  219. </label>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226.  
  227.  
  228. </div>
  229. </div>
  230. <div class="col-sm-9 col-lg-9" id="map">
  231. <div id="loading">
  232. <div class="loading-indicator">
  233. <div class="progress progress-striped active">
  234. <div class="progress-bar progress-bar-info" style="width: 100%"></div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <!-- Navigation modal -->
  241. <div class="modal fade" id="aboutModal">
  242. <div class="modal-dialog">
  243. <div class="modal-content">
  244. <div class="modal-header">
  245. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  246. <h4 class="modal-title">Welcome to the<i> Franklin County </i>parcel map</h4>
  247. </div>
  248.  
  249. <div class="modal-body">
  250. <ul id="aboutTabs" class="nav nav-tabs">
  251. <li class="active" style="color: black"><a href="#about" data-toggle="tab" style="color: grey"><i class="fa fa-question-circle" style="color: #3168a4"></i>&nbsp;About the project</a></li>
  252. <!-- <li><a href="#contact" data-toggle="tab" style="color: grey"><i class="fa fa-envelope" style="color: #3168a4"></i>&nbsp;Contribute</a></li>-->
  253. <li><a href="#disclaimer" data-toggle="tab" style="color: grey"><i class="fa fa-wrench" style="color: #3168a4"></i>&nbsp;Framework</a></li>
  254. <li class="dropdown" style="color: black">
  255. <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: grey"><i class="fa fa-globe" style="color: #3168a4"></i>&nbsp;Metadata <b class="caret"></b></a>
  256. <ul class="dropdown-menu">
  257.  
  258. <li><a href="#cemeteries-tab" data-toggle="tab" >Cemeteries</a></li>
  259.  
  260. </ul>
  261. </li>
  262. </ul>
  263. <div id="aboutTabsContent" class="tab-content" style="padding-top: 10px;">
  264. <div class="tab-pane fade active in" id="about">
  265. <p>The Early Anglo-Saxon Mapping Project is a Cultural Heritage Informatics Initiative Project</p>
  266. <div class="panel panel-primary">
  267. <div class="panel-heading">
  268. Attribution
  269. </div>
  270. <ul class="list-group">
  271. <li class="list-group-item">Map and framework created by <a href="http://bonesdontlie.wordpress.com" style="color: #3168a4">Katy Meyers</a>, Department of Anthropology, Michigan State University</li>
  272. <li class="list-group-item">Data provided by <a href="http://darkageology.wordpress.com/" style="color: #3168a4">Matthew Austin</a>, Department of Archaeology, University of Reading</li>
  273. <li class="list-group-item">Support and sponsorship by <a href="http://www2.matrix.msu.edu/" style="color: #3168a4">Matrix: Center for Digital Humanities and Social Science</a></li>
  274. <li class="list-group-item">Thank you to .... </li>
  275.  
  276. </ul>
  277. </div>
  278. </div>
  279. <div class="tab-pane" id="disclaimer">
  280. <p>This site is built from a <a href="https://github.com/bmcbride/bootleaf" style="color: #3168a4">Bootleaf</a> framework created by Bryan McBride, a simple template for building web mapping applications with <a href="http://getbootstrap.com/" style="color: #3168a4">Bootstrap 3</a> and <a href="http://leafletjs.com/" target="_blank" style="color: #3168a4">Leaflet</a>
  281. </p>
  282. <div class="panel panel-primary">
  283. <div class="panel-heading">
  284. Features
  285. </div>
  286. <ul class="list-group">
  287. <li class="list-group-item">Fullscreen mobile-friendly map template with responsive navbar, sidebar, and modal placeholders</li>
  288. <li class="list-group-item">jQuery loading of external GeoJSON files</li>
  289. <li class="list-group-item">Elegant client-side multi-layer feature search with autocomplete using <a href="http://twitter.github.io/typeahead.js/" target="_blank" style="color: #3168a4">typeahead.js</a></li>
  290. <li class="list-group-item">Map Markers complements of <a href="http://medialoot.com/item/free-vector-map-location-pins/" style="color: #3168a4">MediaLoot</a>.</li>
  291. <li class="list-group-item">Custom Location Based URLs complements of <a href="https://github.com/mlevans/leaflet-hash" style="color: #3168a4">Leaflet Hash</a> by Michael Evans.</li>
  292. </ul>
  293. </div>
  294.  
  295. </div>
  296. <div class="tab-pane fade" id="contact">
  297. <form id="contact-form" method=”POST” action=”contact-form-submission.php”>
  298. <fieldset>
  299. <div class="form-group">
  300. <label for="name">Name:</label>
  301. <input type="text" class="form-control" id="name">
  302. </div>
  303. <div class="form-group">
  304. <label for="email">Email:</label>
  305. <input type="text" class="form-control" id="email">
  306. </div>
  307. <div class="form-group">
  308. <label for="cemname">Cemetery Name:</label>
  309. <input type="text" class="form-control" id="cemname">
  310. </div>
  311. <div class="form-group">
  312. <label for="location">Cemetery Location:</label>
  313. <input type="text" class="form-control" id="location">
  314. </div>
  315. <div class="form-group">
  316. <label for="other">Other Information:</label>
  317. <textarea class="form-control" rows="5" id="other"></textarea>
  318. </div>
  319.  
  320. <button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Submit</button>
  321. </fieldset>
  322. </form>
  323. </div>
  324.  
  325.  
  326. <div class="tab-pane fade" id="cemeteries-tab">
  327. <p>Cemetery data courtesy of <a href="https://data.cityofnewyork.us/Recreation/Theaters/kdu2-865w" target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
  328. </div>
  329.  
  330. </div>
  331. </div>
  332. </div><!-- /.modal-content -->
  333. </div><!-- /.modal-dialog -->
  334. </div><!-- /.modal -->
  335.  
  336. <div class="modal fade" id="legendModal">
  337. <div class="modal-dialog">
  338. <div class="modal-content">
  339. <div class="modal-header">
  340. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  341. <h4 class="modal-title">Map Legend</h4>
  342. </div>
  343. <div class="modal-body">
  344. <p>
  345. <img src="img/pin#3168a4.png" width="24" height="28"> Mixed Cemeteries</p>
  346. <p>
  347. <img src="img/pin#3168a4.png" width="24" height="28"> Cremation Cemeteries</p>
  348. </div>
  349. </div><!-- /.modal-content -->
  350. </div><!-- /.modal-dialog -->
  351. </div><!-- /.modal -->
  352.  
  353. <div class="modal fade" id="loginModal">
  354. <div class="modal-dialog">
  355. <div class="modal-content">
  356. <div class="modal-header">
  357. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  358. <h4 class="modal-title">Login</h4>
  359. </div>
  360. <div class="modal-body">
  361. <form id="contact-form">
  362. <fieldset>
  363. <div class="form-group">
  364. <label for="name">Username:</label>
  365. <input type="text" class="form-control" id="username">
  366. </div>
  367. <div class="form-group">
  368. <label for="email">Password:</label>
  369. <input type="password" class="form-control" id="password">
  370. </div>
  371. </fieldset>
  372. </form>
  373. </div>
  374. <div class="modal-footer">
  375. <button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Login</button>
  376. </div>
  377. </div><!-- /.modal-content -->
  378. </div><!-- /.modal-dialog -->
  379. </div><!-- /.modal -->
  380.  
  381. <div class="modal fade" id="featureModal">
  382. <div class="modal-dialog">
  383. <div class="modal-content">
  384. <div class="modal-header">
  385. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  386. <h4 class="modal-title text-primary" id="feature-title"></h4>
  387. </div>
  388. <div class="modal-body" id="feature-info">
  389. </div>
  390. </div><!-- /.modal-content -->
  391. </div><!-- /.modal-dialog -->
  392. </div><!-- /.modal -->
  393.  
  394. <!-- This is where leaflet map begins -->
  395.  
  396. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  397. <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  398. <script type="text/javascript" src="assets/typeahead.js/typeahead.min.js"></script> <!--https://github.com/twitter/typeahead.js/-->
  399. <!--<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>-->
  400. <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  401. <script src="https://cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script>
  402. <!--<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>-->
  403. <script src="measure/leaflet-measure.js"></script>
  404. <script type="text/javascript" src="assets/leaflet-hash.js"></script>
  405. <script type="text/javascript" src="measure/measure.js"></script>
  406. <script type="text/javascript">
  407.  
  408. var map, cemeteriesSearch = [], cremationSearch = [];
  409.  
  410. $(document).ready(function() {
  411. $("[rel=tooltip]").tooltip();
  412. if (document.body.clientWidth <= 767) {
  413. $("#map").css("class", "col-sm-12 col-lg-12");
  414. $("#sidebar").css("display", "none");
  415. };
  416. });
  417. $(window).resize(function() {
  418. $(".tt-dropdown-menu").css("max-height", $("#container").height()-$(".navbar").height()-20);
  419. if (document.body.clientWidth <= 767) {
  420. $("#map").css("class", "col-sm-12 col-lg-12");
  421. $("#sidebar").css("display", "none");
  422. } else {
  423. $("#map").css("class", "col-sm-9 col-lg-9");
  424. $("#sidebar").css("display", "block");
  425. };
  426. });
  427.  
  428. $("#toggle").click(function() {
  429. $("#toggle i").toggleClass("fa fa-check-square-o fa fa-map-marker");
  430. $("#map").toggleClass("col-sm-9 col-lg-9 col-sm-12 col-lg-12");
  431. $("#sidebar").toggle();
  432. if (document.body.clientWidth <= 767) {
  433. $("#map").toggle();
  434. };
  435. map.invalidateSize();
  436. return false;
  437. });
  438.  
  439. $("input[name='basemapLayersRadio']").change(function () {
  440. // Remove unchecked layers
  441. $("input:radio[name='basemapLayersRadio']:not(:checked)").each(function () {
  442. map.removeLayer(window[$(this).attr("id")]);
  443. });
  444. // Add checked layer
  445. $("input:radio[name='basemapLayersRadio']:checked").each(function () {
  446. map.addLayer(window[$(this).attr("id")]);
  447. });
  448. });
  449.  
  450. $("input:checkbox[name='overlayLayers']").change(function () {
  451. var layers = [];
  452. function sortByKey(array, key) {
  453. return array.sort(function (a, b) {
  454. var x = a[key];
  455. var y = b[key];
  456. return ((x < y) ? -1 : ((x > y) ? 1 : 0));
  457. });
  458. }
  459. if ($("#" + $(this).attr("id")).is(":checked")) {
  460. $("input:checkbox[name='overlayLayers']").each(function () {
  461. // Remove all overlay layers
  462. map.removeLayer(window[$(this).attr("id")]);
  463. if ($("#" + $(this).attr("id")).is(":checked")) {
  464. // Add checked layers to array for sorting
  465. layers.push({
  466. "z-index": $(this).attr("z-index"),
  467. "layer": $(this)
  468. });
  469. }
  470. });
  471. // Sort layers array by z-index
  472. var orderedLayers = sortByKey(layers, "z-index");
  473. // Loop through ordered layers array and add to map in correct order
  474. $.each(orderedLayers, function () {
  475. map.addLayer(window[$(this)[0].layer[0].id]);
  476. });
  477. } else {
  478. // Simply remove unchecked layers
  479. map.removeLayer(window[$(this).attr("id")]);
  480. }
  481. });
  482.  
  483. // Add Basemaps
  484.  
  485.  
  486.  
  487. // Basemap Layers
  488. var mapboxOSM = L.tileLayer("http://{s}.tiles.mapbox.com/v3/spatialnetworks.map-6l9yntw9/{z}/{x}/{y}.png", {
  489. maxZoom: 19,
  490. subdomains: ["a", "b", "c", "d"],
  491. attribution: 'Basemap <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox © OpenStreetMap</a>'
  492. });
  493.  
  494.  
  495. /*var mapquestOSM = L.tileLayer("http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", {
  496. maxZoom: 19,
  497. subdomains: 'abcd',
  498. attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
  499. });*/
  500. var mapboxSAT = L.tileLayer("http://{s}.tiles.mapbox.com/v3/spatialnetworks.map-xkumo5oi/{z}/{x}/{y}.jpg", {
  501. maxZoom: 20,
  502. subdomains: ["a", "b", "c", "d"],
  503. attribution: 'Basemap <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox © OpenStreetMap</a>'
  504. });
  505.  
  506. var esriBase = L.esri.basemapLayer("Topographic");
  507.  
  508. // Overlay Layers
  509.  
  510. map = L.map("map", {
  511. zoom: 14,
  512. center: [34.5103, -87.728],
  513. layers: [mapboxOSM]
  514. });
  515.  
  516.  
  517.  
  518.  
  519.  
  520. /*
  521. var layerUrl = 'https://cartomike.carto.com/api/v2/viz/2ca69908-80ff-11e6-90c0-0ecd1babdde5/viz.json';
  522.  
  523. cartodb.createLayer(map, layerUrl)
  524. .addTo(map)
  525. .on('done', function(layer) {
  526.  
  527. }).on('error', function() {
  528. //log the error
  529. });
  530. */
  531.  
  532.  
  533. var hash = new L.Hash(map);
  534.  
  535.  
  536. // Larger screens get expanded layer control
  537. if (document.body.clientWidth <= 767) {
  538. var isCollapsed = true;
  539. } else {
  540. var isCollapsed = false;
  541. };
  542.  
  543. // Highlight search box text on click
  544. $("#searchbox").click(function () {
  545. $(this).select();
  546. });
  547.  
  548. // Typeahead search functionality
  549. $(document).one("ajaxStop", function() {
  550. $("#loading").hide();
  551. $("#searchbox").typeahead([{
  552.  
  553. name: "Mixed Cemeteries",
  554. local: cemeteriesSearch,
  555. minLength: 2,
  556. limit: 10,
  557. header: "<h4 class='typeahead-header'><img src='img/pin#3168a4.png' width='20' height='28'>&nbsp;Mixed Cemeteries</h4>"
  558.  
  559. },{
  560.  
  561. name: "Cremation Cemeteries",
  562. local: cremationSearch,
  563. minLength: 2,
  564. limit: 10,
  565. header: "<h4 class='typeahead-header'><img src='img/pin#3168a4.png' width='20' height='28'>&nbsp;Cremation Cemeteries</h4>"
  566. },{
  567. name: "GeoNames",
  568. remote: {
  569. url: "http://api.geonames.org/searchJSON?username=bootleaf&featureClass=P&maxRows=5&countryCode=US&name_startsWith=%QUERY",
  570. beforeSend: function(jqXhr, settings) {
  571. settings.url += "&east="+map.getBounds().getEast()+"&west="+map.getBounds().getWest()+"&north="+map.getBounds().getNorth()+"&south="+map.getBounds().getSouth();
  572. },
  573. filter: function(parsedResponse) {
  574. var dataset = [];
  575. for(i = 0; i < parsedResponse.geonames.length; i++) {
  576. dataset.push({
  577. value: parsedResponse.geonames[i].name,
  578. tokens: [parsedResponse.geonames[i].name],
  579. layer: "GeoNames",
  580. lat: parsedResponse.geonames[i].lat,
  581. lng: parsedResponse.geonames[i].lng
  582. });
  583. }
  584. return dataset;
  585. }
  586. },
  587. minLength: 2,
  588. limit: 5,
  589. header: "<h4 class='typeahead-header'><img src='img/globe.png' width='25' height='25'>&nbsp;GeoNames Places</h4>"
  590. }]).on("typeahead:selected", function (obj, datum) {
  591. if (datum.layer === "Boroughs") {
  592. map.fitBounds(datum.bounds);
  593. };
  594. if (datum.layer === "Cemeteries") {
  595. if (!map.hasLayer(cemeteries)) {
  596. map.addLayer(cemeteries);
  597. $("#cemeteries").prop("checked", true);
  598. };
  599. map.setView([datum.lat, datum.lng], 17);
  600. if (map._layers[datum.id]) {
  601. map._layers[datum.id].openPopup();
  602. };
  603. };
  604. if (datum.layer === "GeoNames") {
  605. map.setView([datum.lat, datum.lng], 14);
  606. };
  607. if ($("#navbar-collapse").height() > 50) {
  608. $("#navbar-collapse").collapse("hide");
  609. };
  610. }).on("typeahead:initialized ", function () {
  611. $(".tt-dropdown-menu").css("max-height", 300);
  612. }).on("typeahead:opened", function () {
  613. $(".navbar-collapse.in").css("max-height", $(document).height()-$(".navbar-header").height());
  614. $(".navbar-collapse.in").css("height", $(document).height()-$(".navbar-header").height());
  615. }).on("typeahead:closed", function () {
  616. $(".navbar-collapse.in").css("max-height", "");
  617. $(".navbar-collapse.in").css("height", "");
  618. });
  619. });
  620.  
  621. // Placeholder hack for IE
  622. if (navigator.appName == "Microsoft Internet Explorer") {
  623. $("input").each( function () {
  624. if ($(this).val() == "" && $(this).attr("placeholder") != "") {
  625. $(this).val($(this).attr("placeholder"));
  626. $(this).focus(function () {
  627. if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
  628. });
  629. $(this).blur(function () {
  630. if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
  631. });
  632. }
  633. });
  634. }
  635. </script>
  636. </body>
  637. </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!