publiclab/mapknitter

<%= stylesheet_link_tag "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css" %>

<%= javascript_include_tag 'maps' %>
<%= javascript_include_tag '//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js' %>
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyAxlBXzYwdeaOMKZgx_UNBp2qBtdD0L_9g" %>

<div class= "row" id="knitter-map-pane" style="height: 450px; width: 100%;  margin-bottom: 1%; z-index: 5; float: none; max-width: none;"> </div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()" style="margin-left: 1%;">Embed code</button>
            <div class="share-link" style="display:none;">
                <%= render :partial => 'maps/share' %>
            </div>
        </div>
        <div class="col-md-3 offset-md-1">
            <% @map.tags.each do |tag| %>
                <span id="tag_<%= tag.id %>" class="badge badge-light">
                    <a href="/tags/<%= tag.name %>" id="tag_<%= tag.id %>"><%= tag.name %></a>
                    <%= link_to([@map, tag], :method => "delete") do %>
                        <span>&times;</span>
                    <% end %>
                </span>
            <% end %>
        </div>
        <div class="col-md-4">
        <% if @map.anonymous? || (current_user && current_user.can_edit?(@map)) || (current_user && current_user.can_delete?(@map)) %>
            <a href="/maps/<%= @map.slug %>/edit">
                <button class="btn btn-outline-info float-right">
                  <span class="fas fa-pencil-alt"></span>
                  Edit this map
                </button>
            </a>
        <% end %>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="text-center lead-text">
        <p class="text-muted">A Community Atlas of </p>
        <h2><%= @map.name %>,</h2>
        <p><%= @map.location %> </p>
        <p> <% if @map.status != 1 %><span class="badge badge-danger"><%= 'UNPUBLISHED' %></span> | <% end %>
          <span> by <%= @map.anonymous? ? @map.author : link_to("@#{@map.author}", "/profile/#{@map.author}") %>
            <%= 'with' unless @users.empty? %>
            <% @users.each_with_index do |author,i| %>
              <a href="/profile/<%= author.login %>">
              <%= "@#{author.login}"%></a>
              <% if i < @users.length-2 %>
                <%= ',' %>
              <% elsif i < @users.length-1 %>
                <%= '&' %>
              <% end %>
            <% end %>
          </span>
        </p>
        
        <div>
          <%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
        </div>
        <br><br>
      </div>
    </div>

    <div class="container">
        <div class="card-deck mb-6  text-center mx-auto">
            <div class="card mapping-kits">
                <img class="card-img-centre img-draw  mx-auto" src="<%= asset_path('balloon1.png') %>" alt="balloon icon">
                <div class="card-content">
                    <h3>Make your own map </h3>
                    <p class="card-text item-description">
                    Use a kite, balloon, pole or drone to take an aerial photo and tell your own visual story of the place
                    </p>
                    <p class="d-inline-flex flex-column">
                    <a class="btn btn-primary btn-lg mb-3" href= 'https://store.publiclab.org/collections/mapping-kits'>
                        Get a mapping kit<i class="fa fa-angle-double-right fa-fw" style="font-size:18px;color:white;"></i>
                    </a>
                    <a class="btn btn-primary btn-lg" href="<%= new_map_url %>?lat=<%= @map.lat %>&lon=<%= @map.lon %>">
                        Add a new map <i class="fa fa-plus fa-fw" style="font-size:12px;color:white;"></i>
                    </a>
                    </p>
                </div>
            </div>
            <div class="card mapping-kits">
                <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('quiz.png') %>" alt="questions">
                <div class="card-content">
                    <h3>Ask a question</h3>
                    <p class="card-text item-description">
                    <a href="https://publiclab.org/questions" target="blank">Search </a>through questions or Ask a question to get help from others and share ideas with the PublicLab Community
                    <%# hence helping you in your environmental exploration %>
                    </p>
                    <p>
                    <a href="https://publiclab.org/questions/new?tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,<%= @map.tags.collect(&:name).join(',') %>&body=Question posted from map at https://mapknitter.org/m/<%= @map.slug %>" target="blank">
                        <button class="btn btn-lg btn-primary">
                            Ask a Question
                        </button>
                    </a>
                    </p>
                </div>
            </div>
        </div>
    </div>

  <div class="all-maps light-blue">
      <br>
      <h3 class="text-center"> Nearby Maps </h3>
      <hr style="max-width: 500px;">
      <br>
      <%= render partial: 'front_ui/maps', locals: { maps: @maps } %>
  </div>

  <div class="row justify-content-center">
    <div class="all-maps off-3 col-6">
      <br>
      <h3 class="text-center"> Exports </h3>
      <%= render partial: 'maps/cloud_exports', locals: { exports: @map.exports }%>
    </div>
  </div>

 <script>
    var map
    (function(){
      window.mapKnitter = new MapKnitter.Map({
        latlng:     L.latLng(<%= @map.lat %>, <%= @map.lon %>),
        zoom:       <%= @map.zoom %>,
        readOnly:   true,
        logged_in:   <%= logged_in? == true %>,
        anonymous:   <%= @map.anonymous? == true %>,
        warpablesUrl: "<%= url_for([@map, :warpables])+'.json' unless @map.warpables.empty? %>"
      });
     })();
  </script>