Browse Source

Extract map js generation into partial

tags/0.3.6^2
Bèr Kessels 1 month ago
parent
commit
47d11d3540
3 changed files with 68 additions and 59 deletions
  1. 34
    0
      app/assets/javascripts/application.js
  2. 30
    0
      app/views/map_js_partial.erb
  3. 4
    59
      app/views/region.erb

+ 34
- 0
app/assets/javascripts/application.js View File

@@ -38,6 +38,40 @@ var sourceEntry = function(feature) {
};
};

var iconFactory = function(leaflet, place_status) {
let iconUrl = '';
switch(place_status) {
case 'open':
iconUrl = '/images/marker-icon-opened.png';
break;
case 'closed':
iconUrl = '/images/marker-icon-closed.png';
break;
case 'unknown':
iconUrl = '/images/marker-icon-unknown.png';
break;
default:
iconUrl = '/images/marker-icon-unknown.png';
break;
};

return leaflet.icon({
iconUrl: iconUrl,
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [0, -28],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});
}

var markerFactory = function(leaflet, id, y, x, icon, popup_content) {
return leaflet.marker([y, x], { icon: icon }).
on('click', highlightAsidePlace(id)).
bindPopup(popup_content);
}

var highlightAsidePlace = function(id) {
var id = 'place-' + id;
return function(e) {

+ 30
- 0
app/views/map_js_partial.erb View File

@@ -0,0 +1,30 @@
var map = L.map('map').setView([<%= index.geometry.y %>, <%= index.geometry.x %>], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'
}).addTo(map);

var centerIcon = L.icon({
iconUrl: '/images/location-icon.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [-20, -40],
});

L.marker([<%==index.geometry.y %>, <%==index.geometry.x%>], {icon: centerIcon}).addTo(map);
var markers = [];

<%- index.collection.each do |place| %>
markers.push(
markerFactory(
L,
'<%== place.id %>',
<%== place.geometry.y %>,
<%== place.geometry.x %>,
iconFactory(L, '<%== place.status %>'),
'<strong><%= place.name %></strong> <%== erb(:status_badge_partial, locals: { status: place.status }).delete("\n") %>'
).addTo(map)
);
<%- end %>

var group = L.featureGroup(markers);
map.fitBounds(group.getBounds());

+ 4
- 59
app/views/region.erb View File

@@ -3,65 +3,10 @@
No places found in <%= @region.name %>
</p>
<% else %>
<%-
js = "var map = L.map('map').setView([#{@region.geometry.y}, #{@region.geometry.x}], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'
}).addTo(map);"
js += "var openedIcon = L.icon({
iconUrl: '/images/marker-icon-opened.png',
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [0, -28],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});"
js += "var closedIcon = L.icon({
iconUrl: '/images/marker-icon-closed.png',
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [0, -28],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});"
js += "var unknownIcon = L.icon({
iconUrl: '/images/marker-icon-unknown.png',
iconSize: [31, 41],
iconAnchor: [15, 41],
popupAnchor: [0, -28],
shadowUrl: '/images/marker-shadow.png',
shadowSize: [41, 41],
shadowAnchor: [14, 41]
});"
js += "var centerIcon = L.icon({
iconUrl: '/images/location-icon.png',
iconSize: [40, 40],
iconAnchor: [20, 20],
popupAnchor: [-20, -40],
});"

js += "L.marker([#{@region.geometry.y}, #{@region.geometry.x}], {icon: centerIcon}).addTo(map);"
js += "var markers = [];"

@region.collection.each do |place|
icon = if place.status == :open
'openedIcon'
elsif place.status == :closed
'closedIcon'
else
'unknownIcon'
end
popup_content = "<strong>#{Rack::Utils.escape_html(place.name)}</strong>"
popup_content += erb(:status_badge_partial, locals: { status: place.status }).delete("\n")
js += "markers.push(L.marker([#{place.geometry.y}, #{place.geometry.x}], {icon: #{icon}}).on('click', highlightAsidePlace('#{place.id}')).addTo(map).bindPopup('#{popup_content}'))\n;"
end

js += "var group = L.featureGroup(markers);"
js += "map.fitBounds(group.getBounds());"
set_content_for(:closing_js, js)
%>
<%- set_content_for(
:closing_js,
erb(:map_js_partial, locals: { index: @region })
) %>

<% set_content_for(:region_slug, @region.slug) %>
<% set_content_for(:region_name, @region.name) %>

Loading…
Cancel
Save