<div id=“container”>

<div id="sidebar">
  <div class="sidebar-wrapper">
    <div class="panel panel-default" id="features">
      <div class="panel-heading">
        <h3 class="panel-title">Points of Interest
        <button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-8 col-md-8">
            <input type="text" class="form-control search" placeholder="Filter" />
          </div>
          <div class="col-xs-4 col-md-4">
            <button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i>&nbsp;&nbsp;Sort</button>
          </div>
        </div>
      </div>
      <div class="sidebar-table">
        <table class="table table-hover" id="feature-list">
          <thead class="hidden">
            <tr>
              <th>Icon</th>
            <tr>
            <tr>
              <th>Name</th>
            <tr>
            <tr>
              <th>Chevron</th>
            <tr>
          </thead>
          <tbody class="list"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="map"></div>

</div> <div id=“loading”>

<div class="loading-indicator">
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info progress-bar-full"></div>
  </div>
</div>

</div> <div class=“modal fade” id=“aboutModal” tabindex=“-1” role=“dialog”>

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Welcome to the BootLeaf template!</h4>
    </div>
    <div class="modal-body">
      <ul class="nav nav-tabs nav-justified" id="aboutTabs">
        <li class="active"><a href="#about" data-toggle="tab"><i class="fa fa-question-circle"></i>&nbsp;About the project</a></li>
        <li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i>&nbsp;Contact us</a></li>
        <li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i>&nbsp;Disclaimer</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i>&nbsp;Metadata <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#boroughs-tab" data-toggle="tab">Boroughs</a></li>
            <li><a href="#subway-lines-tab" data-toggle="tab">Subway Lines</a></li>
            <li><a href="#theaters-tab" data-toggle="tab">Theaters</a></li>
            <li><a href="#museums-tab" data-toggle="tab">Museums</a></li>
          </ul>
        </li>
      </ul>
      <div class="tab-content" id="aboutTabsContent">
        <div class="tab-pane fade active in" id="about">
          <p>A simple, responsive template for building web mapping applications with <a href="http://getbootstrap.com/">Bootstrap 3</a>, <a href="http://leafletjs.com/" target="_blank">Leaflet</a>, and <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>. Open source, MIT licensed, and available on <a href="https://github.com/bmcbride/bootleaf" target="_blank">GitHub</a>.</p>
          <div class="panel panel-primary">
            <div class="panel-heading">Features</div>
            <ul class="list-group">
              <li class="list-group-item">Fullscreen mobile-friendly map template with responsive navbar and modal placeholders</li>
              <li class="list-group-item">jQuery loading of external GeoJSON files</li>
              <li class="list-group-item">Logical multiple layer marker clustering via the <a href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">leaflet marker cluster plugin</a></li>
              <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">typeahead.js</a></li>
              <li class="list-group-item">Responsive sidebar feature list synced with map bounds, which includes sorting and filtering via <a href="http://listjs.com/" target="_blank">list.js</a></li>
              <li class="list-group-item">Marker icons included in grouped layer control via the <a href="https://github.com/ismyrnow/Leaflet.groupedlayercontrol" target="_blank">grouped layer control plugin</a></li>
            </ul>
          </div>
        </div>
        <div id="disclaimer" class="tab-pane fade text-danger">
          <p>The data provided on this site is for informational and planning purposes only.</p>
          <p>Absolutely no accuracy or completeness guarantee is implied or intended. All information on this map is subject to such variations and corrections as might result from a complete title search and/or accurate field survey.</p>
        </div>
        <div class="tab-pane fade" id="contact">
          <form id="contact-form">
            <div class="well well-sm">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="first-name">First Name:</label>
                    <input type="text" class="form-control" id="first-name">
                  </div>
                  <div class="form-group">
                    <label for="last-name">Last Name:</label>
                    <input type="text" class="form-control" id="last-email">
                  </div>
                  <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="text" class="form-control" id="email">
                  </div>
                </div>
                <div class="col-md-8">
                  <label for="message">Message:</label>
                  <textarea class="form-control" rows="8" id="message"></textarea>
                </div>
                <div class="col-md-12">
                  <p>
                    <button type="submit" class="btn btn-primary pull-right" data-dismiss="modal">Submit</button>
                  </p>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="tab-pane fade" id="boroughs-tab">
          <p>Borough data courtesy of <a href="http://www.nyc.gov/html/dcp/pdf/bytes/nybbwi_metadata.pdf" target="_blank">New York City Department of City Planning</a></p>
        </div>
        <div class="tab-pane fade" id="subway-lines-tab">
          <p><a href="http://spatialityblog.com/2010/07/08/mta-gis-data-update/#datalinks" target="_blank">MTA Subway data</a> courtesy of the <a href="http://www.urbanresearch.org/about/cur-components/cuny-mapping-service" target="_blank">CUNY Mapping Service at the Center for Urban Research</a></p>
        </div>
        <div class="tab-pane fade" id="theaters-tab">
          <p>Theater data courtesy of <a href="https://data.cityofnewyork.us/Recreation/Theaters/kdu2-865w" target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
        </div>
        <div class="tab-pane fade" id="museums-tab">
          <p>Museum data courtesy of <a href="https://data.cityofnewyork.us/Recreation/Museums-and-Galleries/sat5-adpb" target="_blank">NYC Department of Information & Telecommunications (DoITT)</a></p>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</div><!– /.modal –>

<div class=“modal fade” id=“legendModal” tabindex=“-1” role=“dialog”>

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Map Legend</h4>
    </div>
    <div class="modal-body">
      <p>Map Legend goes here...</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</div><!– /.modal –>

<div class=“modal fade” id=“loginModal” tabindex=“-1” role=“dialog”>

<div class="modal-dialog modal-sm">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Login</h4>
    </div>
    <div class="modal-body">
      <form id="contact-form">
        <fieldset>
          <div class="form-group">
            <label for="name">Username:</label>
            <input type="text" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="email">Password:</label>
            <input type="password" class="form-control" id="password">
          </div>
        </fieldset>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      <button type="submit" class="btn btn-primary" data-dismiss="modal">Login</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</div><!– /.modal –>

<div class=“modal fade” id=“featureModal” tabindex=“-1” role=“dialog”>

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title text-primary" id="feature-title"></h4>
    </div>
    <div class="modal-body" id="feature-info"></div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</div><!– /.modal –>

<div class=“modal fade” id=“attributionModal” tabindex=“-1” role=“dialog”>

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">
        Developed by <a href='http://bryanmcbride.com'>bryanmcbride.com</a>
      </h4>
    </div>
    <div class="modal-body">
      <div id="attribution"></div>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</div><!– /.modal –> <script src=“code.jquery.com/jquery-2.1.4.min.js”>> <script src=“maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js”>> <script src=“cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js”>> <script src=“api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js”>> <script src=“api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js”>> <script src=“assets/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js”></script> <script src=“{{ '/assets/js/app.js' | prepend: site.url }}”></script>