---
layout: default-map
title: Columbine Valley Ash Tree Data Collector
version: v0.32.1
script: app.js
extra-js:
  - //www.gstatic.com/firebasejs/3.7.4/firebase.js
  - //api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.0/mapbox-gl-draw.js
  - //cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js
  - shpwrite.js
extra-css:
  - //api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.0/mapbox-gl-draw.css
  - app.css
---
<ul id="slide-out" class="side-nav fixed">
  <a href="#" class="brand-logo center hide-on-med-and-up">{{ page.title }}</a>
  <li class="no-padding">
    <ul class="collapsible" data-collapsible="expandable">
      



    <!-- Instructions-->
      <li>
        <a class="collapsible-header red-burnt white-text">Instructions<i class="material-icons white-text">add_location</i></a>
        <div class="collapsible-body">
          <p class="grey-text text-darken-3">Select the <i class="tiny material-icons blue-text">place</i> button and then click in the map to set a marker. Select the <i class="tiny material-icons red-text text-accent-2">cancel</i> button before clicking in the map to cancel drawing.</p>
          <p>Once a marker is placed, a form will pop up for you to provide information and a picture upload. If necessary, you can drag your marker to relocate it before pressing <span class="blue-text">SUBMIT</span>. Hover over your point and the <i class="tiny material-icons">open_with</i> icon will appear and allow you to move the point. You can also press the <span class="red-text text-accent-2">CANCEL</span> button to delete the marker and clear the form.</p>
        </div>
      </li>
      

      <!-- Basemap choices -->
      <li>
        <a class="collapsible-header red-burnt white-text">Basemap Options<i class="material-icons white-text">map</i></a>
        <div class="collapsible-body grey-text text-darken-2">
          <form id="menu">
            <p class="narrow">
              <input name="group1" type="radio" id="test1" value='cj1qjjocj00112srqxugk16eo' checked/>
              <label for="test1">Satellite Streets</label>
            </p>
            <p class="narrow">
              <input name="group1" type="radio" id="test2" value= "cikh67rk8004n9vkouhls14s4">
              <label for="test2">Streets Light</label>
            </p>
            <p class="narrow">
              <input name="group1" type="radio" id="test3" value="cj3kop90l000g2smjcwm8nm9b">
              <label for="test3">Outdoors</label>
            </p>
          </form>
        </div>
      </li>



      <!-- Toggle Layers -->
      <li>
        <a class="collapsible-header red-burnt white-text">Layers<i class="material-icons white-text">layers</i></a>
        <div class="collapsible-body grey-text text-darken-2">
          <p>
            <input name="catelogMenu" type="checkbox" id="catelogMenu" class="layer-on" onclick="toggleLayer('firebasePoint')" checked/>
            <label for="catelogMenu" class="valign">Current Tree Catalog </label>
          </p>

           <p>
            <input name="parcelMenu" type="checkbox" id="parcelMenu" class="layer-on" onclick="toggleLayer('parcels')" checked/>
            <label for="parcelMenu" class="valign">Parcel</label>
          </p>

          <p>
            <input name="parcelLabelMenu" type="checkbox" id="parcelLabelMenu" class="layer-off" onclick="toggleLayer('parcelLabels')"/>
            <label for="parcelLabelMenu" class="valign">Address Labels</label>
          </p>

          <p>
            <input name="boundaryMenu" type="checkbox" id="boundaryMenu" class="layer-off" onclick="toggleLayer('boundary')" checked/>
            <label for="boundaryMenu" class="valign">Town Limits</label>
          </p>
         
        </div>
      </li>

     <p>
        <span class= "align-left">
        	<a href = "http://images.slideplayer.com/32/10083206/slides/slide_6.jpg" target = "blank"><img src="ashTreeID4.jpg" border="0"></a>
        </span>
     </p>

    </ul>
  </li>



</ul>

<div class="container">
  <div id="info-row" class="row">
    <div class="col s10 m6 offset-m5 l3 offset-l8 abs">
      <div id="input-card" class="card red-burnt">
        <div class="card-content white-text">
          <span class="card-title">Draw a Feature</span>
        </div>
        <div id="action" class="card-action">
          <a id="adminPoint" class="disabled waves-effect waves-blue btn blue white-text" onclick="drawPoint()"><i class="material-icons">place</i></a>
          <!--<a id="adminLine" class="disabled waves-effect waves-blue btn blue white-text" onclick="drawLine()"><i class="material-icons">show_chart</i></a> 
          <a id="adminPolygon" class="disabled waves-effect waves-blue btn blue white-text" onclick="drawPoly()"><i class="material-icons">layers</i></a> -->
          <a id="adminEdit" class="disabled deep-orange accent-1 waves-effect waves-deep-orange btn white-text" onclick="adminEdit()"> <i class="material-icons">create</i></a>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Auth Modal -->
<div id="modalAdmin" class="modal">
  <div class="modal-content">
    <div class="row">
      <form id="adminForm" class="col s12 l6 offset-l3">
        <div class="row">
          <div class="input-field col s12">
            <input id="adminEmail" type="email" class="validate">
            <label for="adminEmail">Email</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="adminPassword" type="password" class="validate">
            <label for="adminPassword">Password</label>
          </div>
          <a href="#modalReset" id="resetPW" class="small">Forgot Password?</a>
        </div>
      </form>
    </div>
  </div>
  <div id="adminFooter" class="modal-footer">
    <a id="adminLogout" href="#!" class="disabled modal-action modal-close waves-effect waves-blue btn blue">Sign Out</a>
    <a id="adminSubmit" href="#!" class="modal-action modal-close waves-effect waves-blue btn blue">Log In</a>
  </div>
</div>

<!-- Reset Modal -->
<div id="modalReset" class="modal">
  <div class="modal-content">
    <div class="row">
      <form id="resetForm" class="col s12 l6 offset-l3">
        <div class="row">
          <div class="input-field col s12">
            <input id="resetEmail" type="email" class="validate">
            <label for="email">Email</label>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div id="resetFooter" class="modal-footer">
    <a id="reset" href="#!" class="modal-action modal-close waves-effect waves-light btn">Reset Password</a>
  </div>
</div>