Map should be better displayed on small screens, particularly legends

This commit is contained in:
echarp 2019-04-20 15:16:21 +02:00
parent f065d38723
commit 08080d7144
4 changed files with 35 additions and 23 deletions

View File

@ -4,6 +4,8 @@ $(document).on 'turbolinks:load', ->
idx = 0
$('#map.list').each ->
map = L.map 'map'
# Set some initial bounds, in case nothing else is displayed
map.fitBounds [ [60, -20], [30, 30] ]
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
@ -21,27 +23,29 @@ $(document).on 'turbolinks:load', ->
url += location.search
$.getJSON url, (json) ->
if json
layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
pointToLayer: (feature, latlng) ->
# Marker with the proper icon
marker = L.AwesomeMarkers.icon
prefix: 'fa',
icon: feature.properties.icon || 'calendar',
markerColor: markerColor
L.marker latlng, icon: marker
,
onEachFeature: (feature, layer) ->
# Does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent)
layer.bindPopup feature.properties.popupContent
# Display the layer only if some items are present
return unless json?.length
map.addLayer layer
controls.addOverlay layer, text + ' - ' + json.length
layer = L.markerClusterGroup(maxClusterRadius: 30).addLayer L.geoJson json,
pointToLayer: (feature, latlng) ->
# Marker with the proper icon
marker = L.AwesomeMarkers.icon
prefix: 'fa',
icon: feature.properties.icon || 'calendar',
markerColor: markerColor
L.marker latlng, icon: marker
onEachFeature: (feature, layer) ->
# Does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent)
layer.bindPopup feature.properties.popupContent
if (/maps\//.test(location.href) || /maps.json/.test url) && layer.getBounds()._northEast && layer.getBounds()._southWest
# Automatic focus to all displayed events
map.fitBounds layer.getBounds()
map.addLayer layer
controls.addOverlay layer, text + ' - ' + json.length
if (/maps\//.test(location.href) || /maps.json/.test url) &&
layer.getBounds()._northEast && layer.getBounds()._southWest
# Automatic focus to all displayed events
map.fitBounds layer.getBounds()
$('#map.event, #map.orga').each ->
coord = [$(this).data('latitude'), $(this).data('longitude')]

View File

@ -2,6 +2,8 @@
height: 60em
box-shadow: 0 0 1em SteelBlue
transition: none
padding-left: 4em
list-style-type: none
*
/* Popup are better displayed with this: */
max-width: initial
@ -10,8 +12,11 @@
height: 20em
li
a
display: inline-block
.awesome-marker
display: inline-block !important
position: relative !important
.tags #map
width: 40%
@ -19,9 +24,8 @@
margin: 1.6em 2%
display: inline-block
// Left align the map controls place in the top right corner
// Left align the map controls placed in the top right corner
section.leaflet-control-layers-list label
text-align: left
.awesome-marker
height: auto !important
display: inline-block !important

View File

@ -38,7 +38,7 @@
nav
display: none
img.logo
margin-right: 0
max-width: 12vw
form#orga_search
display: none
@ -124,6 +124,10 @@
.radios
margin-left: auto
#map section
input, .awesome-marker
display: none !important
body.mce-content-body
padding: 1px 0
.mce-btn-group .mce-btn

View File

@ -15,5 +15,5 @@
= link_to map_path kind.name, format: :json do
.awesome-marker{ class: "awesome-marker-icon-#{cs[idx % cs.length]}" }
%i.icon-white.fa{ class: "fa-#{kind.icon}" }
= Kind.human_attribute_name("name_#{kind.name}")
= Kind.human_attribute_name "name_#{kind.name}"
- idx += 1