{% extends 'layout.html' %}

{% block content %}

<h2>Interactive Map</h2>

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/map">Map</a></li>
</ol>


 <!-- input search form -->
 <div class="container">
   <div class="row">
     <p>Type an address to find and visualize the related IRIS.
     </p>
     <div class="col-md-6">
       <h3>Search</h3>
       <div id="custom-search-input">
           <div class="input-group col-md-12">
           <input type="text" id="address_search" data-provide="typeahead" class="form-control input-lg typeahead" placeholder="Address" />
           <span class="input-group-btn">
             <button class="btn btn-info btn-lg" type="button" id="bsearch">
               <i class="glyphicon glyphicon-search"></i>
             </button>
           </span>
         </div>
       </div>
     </div>
   </div>
 </div>  <!-- container -->

 <br />

 <!-- map -->
<div class="container">
  <div id="Map" style="width: 90%; height: 600px;">
  </div>
</div>

{% endblock %}


{% block appjs %}
<script src="{{ url_for('static', filename='map.js') }}" type="text/javascript"></script>
{% endblock %}
