Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <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="Simple mapping project using Leaflet.js and GeoJSON">
    <meta name="author" content="Tim Miller">
    <link rel="icon" type="image/jpg" href="http://users.humboldt.edu/tmiller/images/Sm.jpg">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
    <link rel="stylesheet" href="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
    <link rel="stylesheet" href="http://users.humboldt.edu/tmiller/css/MarkerCluster.css" />
    <link rel="stylesheet" href="http://users.humboldt.edu/tmiller/css/MarkerCluster.Default.css" />
​
    <title>Ride Mapper with leaflet.js &amp; GeoJSON</title>
​
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
​
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
​
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
​
​
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
​
    <!-- 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]-->
  </head>
​
  <body>
​
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href='http://sometimesmotion.net' title="Sometimesmotion">Home</a></li>
              <li><a href='http://users.humboldt.edu/tmiller/ppp.html' title="Tim Miller's Professional Performance Plan">Portfolio</a></li>
              <li><a href='projects.html' title="List of projects used to teach Web Literacy">Projects</a></li>
              <li><a href='http://www.flickr.com/photos/11435686@N03/sets' title="My Flickr page">Photos</a></li>
              <!--<li><a href='everywhere/rideList.php'>Ride List</a></li>-->
            </ul>
          </div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        </div><!--/.navbar-collapse -->
      </div>
    </nav>
​
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1 class="lobster">Riding to Everywhere</h1>  
        <p>Some rides I want to go on. <!--Use the
        facets below to filter the results. Markers will appear on the map for those rides that are selected.-->
        Click on the marker to show the ride description.</p>
        <div id="map"></div>
            <p id="addRide"><span class="addIcon ion-plus-circled"></span> Add a ride</p>
        <form id="createRides">
          <fieldset id="rideInfo">
            <label>Ride Name:</label>
            <input type="text" name="name" value="Ride Name"><br>
            <input type="checkbox" name="type" value="road"> Road<br>
            <input type="checkbox" name="type" value="gravel"> Gravel<br>
            <input type="checkbox" name="type" value="mixed"> Mixed<br>
            <label>Distance: </label>
            <input type="text" name="distance" value="Distance (miles)"><br>
            <label>Climbing: </label>
            <input type="text" name="climbing" value="Total climbing (feet)"><br>
            <label>Description: </label>
            <textarea type="radio" name="description">Short Description</textarea><br>
            <label>Location: </label>
            <input type="text" name="location" value="Town name"><br>
            <label>Lat: </label>
            <input type="text" name="lat" value="Latitude (second # in Google Maps)"><br>
            <label>Long: </label>
            <input type="text" name="long" value="Longitude (first # in Google Maps)"><br>
            <label>Link: </label>
            <input type="text" name="link" value="Full URL"><br>
            <div id="clearAll" class="clear">clear all filters</div>
            <input type="submit" id="submitRide" value="Submit">
          </fieldset>
        </form>
      </div>
    </div>
​
    <div class="container">
      <footer>
        <p></p>
      </footer>
    </div> <!-- /container -->
​
​
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <script src="http://users.humboldt.edu/tmiller/js/leaflet.markercluster-src.js"></script>
    <script src="http://watson.lennardvoogdt.nl/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
​
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
millrt138pro
0viewers