aboutsummaryrefslogtreecommitdiff
path: root/app/views/welcome/index.html.erb
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-10-08 17:38:04 +0200
committerhellekin <hellekin@cepheide.org>2020-10-08 17:38:04 +0200
commitc0a3378d2587c9fda27e97645799dd7a008819a1 (patch)
tree9bd6b99848e6c906cbfc921c545dda4d0d93562b /app/views/welcome/index.html.erb
parent00ac912be46d858379fb5685b7290fe8d60001ef (diff)
downloadincommon-map-c0a3378d2587c9fda27e97645799dd7a008819a1.tar.gz
Make map more beautiful
This commit introduces a few things: 1. New `content_for` hooks for :debug, :head, and :body_end so that views code remains consistent and clean 2. Fullscreen map! 3. Welcome#index view, the Rails way It also moves controller-related code to the controller, Enjoy!
Diffstat (limited to 'app/views/welcome/index.html.erb')
-rw-r--r--app/views/welcome/index.html.erb53
1 files changed, 21 insertions, 32 deletions
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 9873194..1977962 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -1,23 +1,26 @@
-<head>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
- integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
- crossorigin="">
- </link>
-</head>
-
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
- integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
- crossorigin="">
-</script>
+<% content_for :head do %>
+ <%= stylesheet_link_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css",
+ integrity: "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
+ crossorigin: '') %>
+ <%= javascript_include_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js",
+ integrity: "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
+ crossorigin: '') %>
+<% end %>
<h1>Bienvenue à l'atelier carto d'IN COMMON</h1>
-<div id="mapid" style="height: 500px;">
-</div>
+<%= tag.div(id: 'map') %>
+
+<% content_for :debug do %>
+ <p>Premier élément de la liste:</p>
+ <% res = @resources.first %>
+ <p><%= res.feature["properties"]["name"] %></p>
+ <p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>
+
+<% content_for :body_end do %>
<script>
- <% @resources = Resource.order(:uuid).page params[:page] %>
- <% res = @resources.first%>
- var mymap = L.map('mapid').setView([50.8503396, 4.3517103],13);
+ var mymap = L.map('map').setView([50.8503396, 4.3517103],13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
@@ -27,24 +30,10 @@
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
}).addTo(mymap);
- //var marker = L.marker(<%= [res.feature["geometry"]["coordinates"][1],res.feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
var marker = L.marker([50.850, 4.351]).addTo(mymap);
- //CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?)
+ //CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?) -- oui
//OU PLUTOT UTILISER POSTGRES POUR FAIRE DES REQUESTES SUR @resources
var count = 0
- <% i = 0
- while i < 25
- if @resources[i] != nil%>
- //var marker = L.marker(<%= [@resources[i].feature["geometry"]["coordinates"][1],@resources[i].feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
- //console.log('<%= @resources[i].feature["properties"]["name"] %>');
- console.log('<%= @resources[i].feature["geometry"]["coordinates"] %>');
- count += 1
- <% end %>
-
- <% i += 1
- end %>
console.log(count)
</script>
-<p>Premier élément de la liste:</p>
-<p><%= res.feature["properties"]["name"] %></p>
-<p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>