app/views/layouts/knitter2.html.erb
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%=raw csrf_meta_tags %>
<title>MapKnitter: <%= @map[:name] ? @map[:name] : "New map" %></title>
<meta name="description" content="<%= @map.description.gsub('"',"'") if @map.description %>" />
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="shortcut icon" href="/images/mapknitter-255.png" />
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js' async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxlBXzYwdeaOMKZgx_UNBp2qBtdD0L_9g"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K5D2HTSG0B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-K5D2HTSG0B');
</script>
</head>
<body>
<%= render :partial => 'layouts/header' %>
<div class="modal modal-welcome">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Looks like this is a new map</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>
This map does not yet have any images. If you're new to MapKnitter, try <a target="_blank" href="/">watching the tutorial video on the front page</a> for a crash course in how to make a map.
</p>
<p><img src="/images/drag-drop.png" /></p>
<p>
To begin, <b>simply drag images onto the map</b> or click the <code><i class="fa fa-upload"></i> <b>Upload</b></code> button in the right sidebar.
</p>
<hr />
<p>
Where can you find aerial images? <a href="//publiclab.org/wiki/balloon-mapping">Take them yourself</a> with a camera on a balloon or kite, or out the window of an airplane.
</p>
</div>
<div class="modal-footer">
<center><button type="button" class="btn btn-lg btn-primary" data-dismiss="modal">Begin</button></center>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<% if params[:annotations] # legacy %>
<%= render :partial => "map/annotations" %>
<% end %>
<div id="knitter-map-pane"<% if @embed %> style="width:100%;max-width:none;"<% end %>>
<% unless @embed %><a class="sidebar-toggle sidebar-toggle-tab"><i class="sidebar-toggle-icon fa fa-chevron-right"></i></a><% end %>
</div>
<% unless @embed %>
<div class="sidebar">
<div class="sidebar-wrap">
<div class="sidebar-inner-wrap">
<div class="sidebar-header"><%= yield :title %></div> <% if @map.new_record? %>
<%= yield %>
<% else %>
<div class="sidebar-content-wrap">
<!-- Toolbar for uploading and viewing images and exporting the map. -->
<div class="btn-group sidebar-buttons" role="group">
<!-- Upload images -->
<button class="btn btn-outline-secondary" title="Upload images" type="button" data-toggle="modal" data-target="#uploadModal" onClick="$('#map-images-tab').tab('show')">
<span class="d-none d-sm-block"><span class="fa fa-upload"></span> Upload</span>
</button>
<!-- Write a research note on Public Lab -->
<a target="_blank" class="btn btn-outline-secondary" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Cimg src=%22<%= @map.warpables.first&.image&.url(:medium) %>%22%3E%3C/img%3E%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>" type="button">
<span class="d-none d-sm-block"><span class="fa fa-file"></span> Post</span>
</a>
<!--
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" title="Export map" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
<span class="fa fa-download"></span>
Download
</button>
<div class="dropdown-menu map-exports" aria-labelledby="btnGroupDrop1" role="menu">
<a class="dropdown-item" href="#"><%= render :partial => 'maps/exports' %></a>
</div>
</div>
-->
</div>
<div class="sidebar-tabs">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#map-details-container" role="tab" data-toggle="tab" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#map-images-container" role="tab" data-toggle="tab">Images</a>
</li>
<li class="nav-item">
<a class="nav-link export-tab" href="#map-exports-container" role="tab" data-toggle="tab">Export</a>
</li>
<li class="nav-item d-none d-sm-block">
<a class="nav-link" target="_blank" href="https://publiclab.org/chat" role="tab" style="border: none;">Chat</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="#map-editing-container" role="tab" data-toggle="tab">Annotate</a>
</li>
-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="map-details-container">
<div class="d-block d-sm-none">
<p style="text-align:center;">
<a class="btn btn-primary btn-lg sidebar-toggle">View map <i class="fa fa-chevron-circle-right"></i></a>
</p>
<hr />
</div>
<div>
<%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
</div>
<p>
<span class="map-detail-label">Location</span>
<a href="https://www.openstreetmap.org/#map=<%= @map.zoom %>/<%= @map.lat %>/<%= @map.lon %>"><%= @map.location %></a>
</p>
<table>
<tr><td><span class="map-detail-label">Latitude </span><%= @map.lat %></td><td><span class="map-detail-label">Longitude </span><%= @map.lon %></td></tr>
</table>
<p>
<span class="map-detail-label">License (<a target="_blank" href="http://publiclab.org/licenses">Learn more</a>):</span>
<a href="/maps/license/<%= @map.license %>"><%= @map.license %></a>
</p>
<hr />
<p class="cta-buttons">
<% if logged_in? %>
<button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
<%= link_to 'Delete map', map_path(@map), method: :delete, class: "btn btn-outline-info btn-sm", data: { confirm: 'Are you sure? This cannot be undone.' } %>
<% end %>
<button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
<!-- this button does not lead to anywhere -->
<!-- <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button> -->
<button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button>
<div class="share-link" style="display:none;">
<%= render :partial => 'maps/share' %>
</div>
<a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
</p>
<div style="display:none;" id="map-edit-container">
<%= render :partial => 'maps/edit' %>
</div>
<div class="tags">
<%= render :partial => "tags/index" %>
</div>
<hr />
<div class="comments">
<%= render :partial => "comments/index" %>
<hr />
<%= render :partial => "comments/new" %>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="map-images-container">
<%= yield :images %>
</div>
<div role="tabpanel" class="tab-pane fade" id="map-editing-container">
<%= render :partial => "sidebar_annotations" %>
</div>
<div role="tabpanel" class="tab-pane fade" id="map-exports-container">
<%= render :partial => "sidebar_exports" %>
</div>
</div>
</div><!-- .sidebar-tabs -->
</div><!-- .sidebar-content -->
<% end %>
</div><!-- .sidebar-inner-wrap -->
</div><!-- .sidebar-wrap -->
</div><!-- .sidebar -->
<%= render :partial => "/images/new" unless params[:action] == 'new' %>
<% end %>
<script>
var map
(function(){
window.mapknitter = new MapKnitter.Map({
latlng: L.latLng(<%= @map.lat %>, <%= @map.lon %>),
zoom: <%= @map.zoom %>,
readOnly: <%= @embed == true || @annotations == true %>,
logged_in: <%= logged_in? == true %>,
anonymous: <%= @map.anonymous? == true %>,
map_id: <%= @map.id || 0 %>,
warpablesUrl: "<%= url_for([@map, :warpables])+'.json' unless @map.warpables.empty? %>"
});
<% if @map.warpables.empty? && params[:action] == 'edit' && @map.display_welcome %>
<% @map.update!(display_welcome: false) %>
$('.modal-welcome').modal();
<% end %>
})();
$(function() {
$('[rel="tooltip"]').tooltip();
});
</script>
</body>
</html>