Skip to content

GitLab

Commit cd08510c authored by Klaus Stein's avatar Klaus Stein
Browse files

Add overlay images to places

parent 157e1b4e
Hide whitespace changes
Inline Side-by-side
app/controllers/image_maps_controller.rb
View file @ cd08510c
......@@ -3,8 +3,10 @@ class ImageMapsController < ApplicationController
# GET /image_maps or /image_maps.json
def index
@image_maps =
ImageMap.with_attached_image.includes(map: {place: :localized_names})
@image_maps = ImageMap.with_attached_image.includes(map: {place: :localized_names})
if pid = params[:place_id]
@image_maps = @image_maps.where(map: {place_id: pid})
end
respond_to do |format|
format.html
format.json
......
app/frontend/src/place-map.js
View file @ cd08510c
import L from 'leaflet';
import 'leaflet-defaulticon-compatibility';
import 'leaflet-toolbar'; // needed for distortableimage
import 'leaflet-distortableimage';
function mapWithPlace(mapdiv) {
const range_template = document.getElementById('range_template');
const map = L.map(mapdiv,
{
center: [50.5,10],
......@@ -9,10 +12,17 @@ function mapWithPlace(mapdiv) {
zoomSnap: 0.25,
zoomDelta: 0.25
});
L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
const osm_de = L.tileLayer.provider('OpenStreetMap.DE').addTo(map);
let all_corners = [];
fetch(mapdiv.dataset.geojsonurl)
.then(r => r.json())
.then(addGeojson);
fetch(mapdiv.dataset.imagemapsurl)
.then(r => r.json())
.then(addImagemaps);
if(mapdiv.dataset.centerpoint) {
L.geoJSON(JSON.parse(mapdiv.dataset.centerpoint), {
......@@ -40,6 +50,41 @@ function mapWithPlace(mapdiv) {
}
).addTo(map);
}
function addImagemaps(data) {
data.filter(im => im.anchors).forEach(addImagemap);
if(all_corners.length > 1) {
map.fitBounds(all_corners);
}
}
function addImagemap(im) {
const corners = im.anchors.coordinates.map(c => L.latLng(c[1],c[0]));
all_corners = all_corners.concat(corners);
const img = L.distortableImageOverlay(im.img_hd,
{ corners: corners,
editable: false,
suppressToolbar: true
});
img.addTo(map);
window.img = img;
const li = range_template.cloneNode(true);
li.id = 'li_im_' + im.id;
const slider = li.querySelector('input[type="range"]')
slider.id = 'im_' + im.id;
const label = li.querySelector('label');
label.textContent = im.name;
label.setAttribute('for',slider.id);
range_template.after(li);
slider.addEventListener('input',
evt => {
img.getElement().style['opacity'] =
slider.value});
label.addEventListener('click', evt => img.bringToFront());
}
}
document.addEventListener("turbolinks:load", function(event) {
......
app/frontend/stylesheets/_place.scss
View file @ cd08510c
......@@ -5,11 +5,11 @@ main.show.place {
figure.map {
order: 99;
margin-right: 0px;
width: 40%;
width: 60%;
min-width: 200px;
.place-map {
height: 50vh;
height: 80vh;
border: 1px solid grey;
margin-bottom: 1px;
box-sizing: border-box;
......@@ -31,5 +31,68 @@ main.show.place {
padding: 0.5rem;
}
}
ul.maps {
list-style: none;
margin: 0px;
padding: 0px;
li {
box-shadow: 0 0 0.8rem #0002;
background: #ff00aa08;
a.map {
display: flex;
align-items: center;
border: 1px solid grey;
margin: 0px 0px 5px 0px;
padding: 1px;
text-decoration: none;
&:hover { background: gold; }
span.imgicon {
width: 50px;
height: 50px;
margin-right: 0.5rem;
display: flex;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
display: block;
}
}
span.maptitle {
flex-grow: 1;
}
span.scale {
padding: 0 0.5rem;
}
}
}
}
ul#ranges {
list-style: none;
li#range_template {
display: none;
}
li {
input {
margin-right: 0.5rem;
display: inline-block;
}
label {
display: inline-block;
padding: 0.3rem 0.5rem;
flex-grow: 1;
&:hover, &:focus {
background: #0002;
}
}
}
}
}
}
app/models/map.rb
View file @ cd08510c
......@@ -54,7 +54,10 @@ class Map < ApplicationRecord
end
}.join('; ')
end
def label
title.blank? ? '– no title –' : title
end
# ToDo: Images, Urls
end
app/views/image_maps/_image_map.geojson.jbuilder
View file @ cd08510c
......@@ -2,10 +2,12 @@
json.type "Feature"
json.properties do
json.extract! image_map, :id, :anchors, :clip, :name, :created_at, :updated_at
json.extract! image_map, :id, :name, :created_at, :updated_at
json.anchors RGeo::GeoJSON.encode(image_map.anchors)
json.clip RGeo::GeoJSON.encode(image_map.clip)
json.place image_map.map.place.name
json.place_url url_for(image_map.map.place)
if image_map.image.variable?
if image_map.image?
json.img url_for(image_map.image_thumbnail)
end
json.map_url url_for(image_map.map)
......
app/views/image_maps/_image_map.json.jbuilder
View file @ cd08510c
json.extract! image_map, :id, :name, :anchors, :clip, :map_id, :created_at, :updated_at
json.extract! image_map, :id, :name, :map_id, :created_at, :updated_at
json.anchors RGeo::GeoJSON.encode(image_map.anchors)
json.clip RGeo::GeoJSON.encode(image_map.clip)
json.url image_map_url(image_map, format: :json)
json.img_hd url_for(image_map.image_hd)
app/views/maps/show.html.erb
View file @ cd08510c
......@@ -2,7 +2,7 @@
<main class="show map">
<header>
<h1><%= @map.title %> (<%= link_to @map.place.name, @map.place
<h1><%= @map.label %> (<%= link_to @map.place.name, @map.place
%><%
if !@map.district.blank? %>,
<span class="district"><%= @map.district %></span><% end %>)<% if !@map.platenumber.blank? %>, <span class="platenumber"><%= @map.platenumber %></span>
......@@ -35,7 +35,7 @@
<% @map.image_maps.each do |im| %>
<figure>
<%= link_to image_tag(im.image_preview,
class: 'preview', alt: im.name),
class: 'preview', alt: im.name, title: im.id),
rails_blob_path(im.image), target: '_blank', title: im.name %>
<figcaption><%= im.sizeinfo_s %></figcaption>
</figure>
......
app/views/places/show.html.erb
View file @ cd08510c
......@@ -2,7 +2,7 @@
<main class="show place">
<figure class="map">
<div class="place-map" data-geojsonurl="<%= place_path(@place, format: :geojson) %>" data-centerpoint="<%= RGeo::GeoJSON.encode(@place.centerpoint).to_json %>"></div>
<div class="place-map" data-geojsonurl="<%= place_path(@place, format: :geojson) %>" data-centerpoint="<%= RGeo::GeoJSON.encode(@place.centerpoint).to_json %>" data-imagemapsurl="<%= place_image_maps_path(@place, format: :json) %>"></div>
<label>Shape: <input type="text" readonly="readonly" value="<%= @place.shape %>"></input></label>
<label>Center: <input type="text" readonly="readonly" value="<%= @place.centerpoint %>"></input></label>
</figure>
......@@ -14,19 +14,30 @@
<p class="description">
<%= @place.description %>
</p>
<h2>Maps</h2>
<% if @place.maps.empty? %>
<p class="nomaps">no maps</p>
<% else %>
<ul>
<ul class="maps">
<% @place.maps.each do |map| %>
<li>
<%= link_to map.title, map %>
<% if map.scale %>
(<%= map.scale %>)
<% end %>
<%= link_to(map, class: 'map') do %>
<span class="imgicon">
<% if im = map.image_maps.first %>
<%= image_tag im.image_thumbnail %>
<% end %>
</span>
<span class="maptitle"><%= (map.label || '– no title –') %></span>
<span class="scale"><% unless map.scale.blank? %><%= map.scale %><% end %></span>
<% end %>
</li>
<% end %>
</ul>
<% end %>
<hr />
<ul id="ranges">
<li id="range_template"><input type="range" min="0" max="1" step="0.1" value="1" /><label for="range_template">–</label></li>
</ul>
</section>
</main>
......
config/routes.rb
View file @ cd08510c
......@@ -12,7 +12,9 @@ Rails.application.routes.draw do
get 'overview/index'
resources :localized_names
resources :places
resources :places do
resources :image_maps, only: :index
end
get 'examples/index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment