app/views/maps/show.html.erb
<%= 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>×</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>