Mappa generale in index, calcolo del geocenter, api mapbox

ferdi2005 · Jul 1, 2019 · 1faa342 · 1faa342
1 parent d7e9738
commit 1faa342
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/app/controllers/monuments_controller.rb b/app/controllers/monuments_controller.rb
@@ -1,12 +1,16 @@
 class MonumentsController < ApplicationController
   include Pagy::Backend
+  include MonumentsHelper
 
   def index
     if params[:latitude] && params[:longitude]
       @pagy, @monument = pagy(Monument.near([BigDecimal.new(params[:latitude]), BigDecimal.new(params[:longitude])]))
+      @monument_nopagy = Monument.near([BigDecimal.new(params[:latitude]), BigDecimal.new(params[:longitude])])
     elsif params[:city]
       @pagy, @monument = pagy(Monument.near("#{params[:city]}"))
+      @monument_nopagy = Monument.near(params[:city])
     end
+    @geocenter = Geocoder::Calculations.geographic_center(@monument_nopagy)
   end
 
   def show

diff --git a/app/helpers/monuments_helper.rb b/app/helpers/monuments_helper.rb
@@ -1,3 +1,6 @@
 module MonumentsHelper
   include Pagy::Frontend
+  def geocenter(monuments)
+    return Geocoder::Calculations.geographic_center(monuments)  
+  end 
 end
diff --git a/app/views/monuments/index.html.erb b/app/views/monuments/index.html.erb
@@ -1,6 +1,18 @@
 <% provide(:title, 'Monumenti nelle vicinanze') %>
 <h1 class="title is-2 is-danger">Lista monumenti nelle vicinanze</h1>
 <% if @monument.any? %>
+<div id="mapid" class="is-centered" style="height: 300px;width:100%;"></div>
+<script>
+var mymap = L.map('mapid').setView(<%= @geocenter.to_s %>, 12);
+L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=<%= ENV['MAPBOX_KEY'] %>', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(mymap);
+
+<% @monument_nopagy.each do |monument| %>
+L.marker([<%= monument.latitude %>, <%= monument.longitude %>]).addTo(mymap)
+    .bindPopup(' <%= image_tag "https://commons.wikimedia.org/w/thumb.php?f=#{monument.image}&w=200" , width: 200  %><br/> <%= link_to monument.itemLabel.capitalize, monument %>');
+<% end %>
+</script>
 <table class="table">
   <thead>
     <th>Immagine</th>

diff --git a/app/views/monuments/map.html.erb b/app/views/monuments/map.html.erb
@@ -1,7 +1,7 @@
 <div id="mapid" class="is-centered" style="height: 100vh;width:100vh;"></div>
 <script>
 var mymap = L.map('mapid').setView([42.504154, 12.646361], 6);
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=<%= ENV['MAPBOX_KEY'] %>', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(mymap);
 

diff --git a/app/views/monuments/show.html.erb b/app/views/monuments/show.html.erb
@@ -4,7 +4,7 @@
 <div id="mapid" class="is-centered" style="height: 360px;"></div>
 <script>
 var mymap = L.map('mapid').setView([<%= @monument.latitude %>, <%= @monument.longitude %>], 18);
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=<%= ENV['MAPBOX_KEY'] %>', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(mymap);