open_trails
Version:
package for visualizing trail data from OpenStreetMap
124 lines (106 loc) • 6.23 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A web app to view Open Street Map trails and paths using Leaflet">
<meta name="author" content="Michael Skaug">
<title>Open Trail Map</title>
<!-- Bootstrap core CSS-->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome for icons-->
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Leaflet JS and CSS-->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<!-- JQuery-->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- D3 and Leaflet.Elevation for elevation plot-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="assets/elevation.css" />
<script type="text/javascript" src="OpenTrailMap-leaflet.elevation.js"></script>
<!-- Bootstrap core JS-->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- osmtogeojson for data conversion-->
<script type="text/javascript" src="node_modules/osmtogeojson/osmtogeojson.js"></script>
<!-- Google Maps Javascript API-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>
<!-- Leaflet-search plugin for search box-->
<script src="node_modules/leaflet-search/dist/leaflet-search.min.js"></script>
<link rel="stylesheet" href="node_modules/leaflet-search/dist/leaflet-search.min.css" />
<!-- Leaflet.Locate control plugin-->
<script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
<link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<!-- Leaflet.legend JS and CSS-->
<script src="node_modules/leaflet-legend/leaflet-legend.js"></script>
<link rel="stylesheet" href="node_modules/leaflet-legend/leaflet-legend.css" />
<!-- OpenTrails styles-->
<link rel="stylesheet" href="assets/OpenTrailMap.css" />
</head>
<body>
<div class="load-icon"><i class="fa fa-spinner fa-pulse fa-3x"></i></div>
<div id="zoom-msg"></div>
<div id="legend">
<svg width="120" height="80">
<line x1="10" y1="20" x2="40" y2="20" class="path" />
<text x="40" y="20" transform="translate(8,4)">Trail</text>
<line x1="10" y1="40" x2="40" y2="40" class="cycleway" />
<text x="40" y="40"transform="translate(8,4)">Bike Path</text>
<line x1="10" y1="60" x2="40" y2="60" class="track" />
<text x="40" y="60" transform="translate(8,4)">Dirt Road</text>
</svg>
</div>
<div id="map-canvas">
<div id="map"></div>
<div id="infoPanel" class="container">
<div class="row" style="padding: 20px;">
<div id="trail_stats" style="background: rgb(240,240,240)"class="col-md-6">
<p style="padding-top: 5px"><span id="trailname" style="font-weight: bold;">NaN</span></p>
<p>Length: <span id="distance">NaN</span> miles</p>
<div style="padding-bottom: 10px; display:inline-block" data-toggle="tooltip" data-placement="top" title="Min and Max altitude (ft)">
<svg width="100" height="30">
<line x1="5" y1="25" x2="30" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" />
<circle cx="5" cy="25" r="3"></circle>
<circle cx="30" cy="5" r="3"></circle>
<text x="5" y="25" id="ele_min" transform="translate(10,5)">NaN</text>
<text x="30" y="5" id="ele_max" transform="translate(5,8)">NaN</text>
</svg>
</div>
<div style="display:inline-block" data-toggle="tooltip" data-placement="top" title="Total elevation gain and loss (ft)">
<svg width="50" height="30">
<line x1="10" y1="8" x2="10" y2="30" style="stroke:rgb(0,0,0);stroke-width:2.5" />
<polygon points="6,15 10,5 14,15" style="" />
<text x="10" y="8" id="ele_gain" transform="translate(5,5)">NaN</text>
</svg>
<svg width="50" height="30">
<line x1="10" y1="5" x2="10" y2="22" style="stroke:rgb(0,0,0);stroke-width:2.5" />
<polygon points="6,20 10,30 14,20" style="" />
<text x="10" y="22" id="ele_loss" transform="translate(5,5)">NaN</text>
</svg>
</div>
</div>
<div id="ele_profile" class="col-md-6"></div>
</div>
<a href="#" class="toggle-info"><i class="fa fa-times"></i></a>
</div>
<div class="h1" id="header">
<a href="#">Open Trail Map</a>
</div>
<a href="https://github.com/mikeskaug/OpenTrailMap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
</div>
<div id="search_bar">
<div id="search_box"></div>
</div>
<div id="tooltip" class="hidden">
<p><span id="value">100</span></p>
</div>
<!-- Make the Map! -->
<script type="text/javascript" src="OpenTrailMap.js"></script>
</body>
</html>