publiclab/mapknitter

<% content_for :title do %>
  <div class="sidebar-title new-map mt-3">
    <h4>Create a new map</h4>
    <p>Pan and zoom to locate your site, then give your map a title, location, and description.</p>
  </div>
<% end %>

<%= form_for @map, :html => { :class => "new-map" } do |f| %>
  <div class="sidebar-content">

    <%=raw errors_for @map %>

    <div class="form-group">
      <%= f.label :name, "Title" %>  
      <%= f.text_field :name, :class => "form-control", :tabIndex => 1 %>          
    </div>

    <div class="form-group">
      <%= f.label :slug, "URL" %>
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button">mapknitter.org/maps/</button>
        <%= f.text_field :slug, :class => "form-control" %>
      </div>
    </div>
    <p><small>Good titles are short and indicate the subject of the map, e.g.:
      <ul class="map-title-examples">
        <li>"Infragram map of goat brush clearing"</li>
        <li>"Construction near BART"</li>
      </ul>
    </small></p>
    <hr/>

    <div class="form-group">
      <%= f.label :location, "Location <small>begin typing to search by name</small>".html_safe %>
      <div class="input-group">
        <div class="input-group-prepend"><button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button></div>
        <%= f.text_field :location, :class => "form-control", :tabIndex => 2 %>
        <div class="input-group-append"><button data-toggle="tooltip" data-placement="top" title="Find your current location" class="btn btn-outline-secondary btn-geocode-map" type="button"><i class="fa fa-crosshairs"></i></button></div>
      </div>
    </div>

    <table class="form-group">
      <tbody>
        <tr><td style="padding-right:6px;">
          <%= f.label :latitude %>
          <%= f.text_field :lat, class: "form-control", value: params[:lat] %>
        </td>
        <td>
          <%= f.label :longitude %>
          <%= f.text_field :lon, class: "form-control", value: params[:lon] %>
        </td></tr>
      </tbody>
    </table>

    <p class="d-block d-sm-none">
      <a class="btn btn-outline-secondary sidebar-toggle"><i class="fa fa-map-marker"></i> Choose location via map</a>
    </p>

    <!-- Map description -->
    <div class="form-group">
      <%= f.label :description %>
      <%= f.text_area :description, :placeholder => "Add links or explanatory images or videos to your map here.", :class => "form-control", :tabIndex => 3 %>
    </div>

    <div class="form-group">
      <label for="license">License - <a target="_blank" href="http://publiclab.org/licenses">Learn more</a></label>
      <select class="form-control" id="map_license" tabindex="15" name="map[license]" type="text">
        <% if logged_in? %><option value="copyright" selected="">None (copyright)</option><% end %>
        <option value="cc-by-sa" selected="">CC-BY-SA</option>
        <option value="cc-by" selected="">CC-BY</option>
        <option value="publicdomain" selected="">Public Domain</option>
      </select>
    </div>

    <% if !logged_in? %><p><% if Rails.env == 'production' %><%= recaptcha_tags :display => {:theme => "white"} %><% end %></p><% end %>

    <%= f.submit "Create map", :class => "btn btn-primary btn-lg", :tabIndex => 4, :data => {confirm: (logged_in? ? nil : 'Are you sure? You will no longer be able to edit the map after you create it.') } %>

    <input type="hidden" name="map[zoom]" id="map_zoom" />

  </div><!-- .new-map-form -->
<% end %>

<script><%= render :partial => 'maps/geocoder', :formats => [:js] %></script>

<script>
  $(document).ready(function() {
    $("#map_name,#map_slug").keyup(function() {
      $("#map_slug").val(string_to_slug($(this).val()))
    });
  });
  $(".btn-geocode-map").click(function (){
    if ("geolocation" in navigator){
        navigator.geolocation.getCurrentPosition(function(position){ 
        $("#map_lat").val(position.coords.latitude);
        $("#map_lon").val(position.coords.longitude);
        map.flyTo([position.coords.latitude,position.coords.longitude],13);
            });
    }else{
        console.log("Browser doesn't support geolocation!");
    }
  })

  function string_to_slug(text){
    return text.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-')
  }
</script>