aboutsummaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/stylesheets/OpenLayers/custom.sass48
-rw-r--r--app/javascript/helpers/routes_map.coffee121
-rw-r--r--app/javascript/packs/referential_lines/show.js2
3 files changed, 110 insertions, 61 deletions
diff --git a/app/assets/stylesheets/OpenLayers/custom.sass b/app/assets/stylesheets/OpenLayers/custom.sass
index fa874d924..21f5233e5 100644
--- a/app/assets/stylesheets/OpenLayers/custom.sass
+++ b/app/assets/stylesheets/OpenLayers/custom.sass
@@ -2,15 +2,21 @@
.list-group-item &
margin-top: 15px
- .routes-labels
+ .ol-routes-layers
+ position: absolute
+ right: 42px
+ top: .5em
padding: 0
display: flex
justify-content: space-between
flex-wrap: wrap
margin: 5px -5px
- li
+ max-width: 80%
+ background-color: transparentize(white, 0.2)
+ border-radius: 3px
+ div
list-style-type: none
- flex: 1 0 25%
+ flex: 1 0 15%
border: 1px solid $lightgrey
padding: 5px
margin: 5px
@@ -18,11 +24,19 @@
cursor: pointer
color: $blue
white-space: nowrap
+ text-overflow: ellipsis
+ overflow: hidden
+ font-size: 0.6em
- &:hover
- background: $orange
+ &.active
+ background: $blue
color: white
+ .ol-routes-layers-button-wrapper
+ position: absolute
+ right: .5em
+ top: .5em
+
.ol-scale-line
background-color: transparent
bottom: 5px
@@ -55,20 +69,20 @@
.ol-zoom
background-color: transparent
- .ol-zoom-in, .ol-zoom-out
- background-color: $darkblue
- color: #fff
- border-radius: 3px
- margin: 0
+ .ol-zoom-in, .ol-zoom-out, .ol-routes-layers-button
+ background-color: $darkblue
+ color: #fff
+ border-radius: 3px
+ margin: 0
- .ol-zoom-in
- border-bottom-left-radius: 0
- border-bottom-right-radius: 0
+ .ol-zoom-in
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
- .ol-zoom-out
- margin-top: 1px
- border-top-left-radius: 0
- border-top-right-radius: 0
+ .ol-zoom-out
+ margin-top: 1px
+ border-top-left-radius: 0
+ border-top-right-radius: 0
.ol-zoomslider
margin: 2px
diff --git a/app/javascript/helpers/routes_map.coffee b/app/javascript/helpers/routes_map.coffee
index 6834406fc..dea916ebd 100644
--- a/app/javascript/helpers/routes_map.coffee
+++ b/app/javascript/helpers/routes_map.coffee
@@ -1,3 +1,56 @@
+RoutesLayersButton = (options) ->
+ menu = options.menu
+
+ toggleMenu = (e)=>
+ $(menu.element).toggleClass 'hidden'
+ button.innerHTML = if button.innerHTML == "+" then "-" else "+"
+
+ button = document.createElement("button")
+ button.innerHTML = "+"
+ button.addEventListener('click', toggleMenu, false)
+ button.addEventListener('touchstart', toggleMenu, false)
+ button.className = "ol-routes-layers-button"
+
+ element = document.createElement('div');
+ element.className = 'ol-control ol-routes-layers-button-wrapper';
+
+ element.appendChild(button)
+
+ ol.control.Control.call(this, {
+ element
+ target: options.target
+ })
+
+ol.inherits RoutesLayersButton, ol.control.Control
+
+RoutesLayersControl = (routes, routes_map) ->
+
+ element = document.createElement('div')
+ element.className = 'ol-unselectable ol-routes-layers hidden'
+ Object.keys(routes).forEach (id)=>
+ route = routes[id]
+ route.active = true
+ label = document.createElement('div')
+ label.className = 'active'
+ label.innerHTML = route.name
+ element.appendChild label
+ label.addEventListener "click", =>
+ console.log "click"
+ route.active = !route.active
+ $(label).toggleClass "active"
+ route.active
+ route.vectorPtsLayer.setStyle routes_map.defaultStyles(route.active)
+ route.vectorEdgesLayer.setStyle routes_map.edgeStyles(route.active)
+ route.vectorLnsLayer.setStyle routes_map.lineStyle(route.active)
+ routes_map.fitZoom()
+ #
+
+ ol.control.Control.call(this, {
+ element
+ })
+
+ol.inherits RoutesLayersControl, ol.control.Control
+
class RoutesMap
constructor: (@target)->
@initMap()
@@ -20,6 +73,7 @@ class RoutesMap
addRoute: (route)->
geoColPts = []
geoColLns = []
+ route.active = true
@routes[route.id] = route if route.id
stops = route.stops || route
geoColEdges = [
@@ -77,68 +131,49 @@ class RoutesMap
@map.addLayer vectorEdgesLayer
@map.addLayer vectorLnsLayer
- lineStyle: (highlighted=false)->
+ lineStyle: (active=true)->
new ol.style.Style
stroke: new ol.style.Stroke
- color: if highlighted then "#ed7f00" else '#007fbb'
- width: 3
+ color: '#007fbb'
+ width: if active then 3 else 0
- edgeStyles: (highlighted=false)->
+ edgeStyles: (active=true)->
new ol.style.Style
image: new ol.style.Circle
radius: 5
stroke: new ol.style.Stroke
- color: if highlighted then "#ed7f00" else '#007fbb'
- width: 2
+ color: '#007fbb'
+ width: if active then 3 else 0
fill: new ol.style.Fill
- color: if highlighted then "#ed7f00" else '#007fbb'
- width: 2
+ color: '#007fbb'
+ width: if active then 3 else 0
- defaultStyles: (highlighted=false)->
+ defaultStyles: (active=true)->
new ol.style.Style
image: new ol.style.Circle
radius: 4
stroke: new ol.style.Stroke
- color: if highlighted then "#ed7f00" else '#007fbb'
- width: 2
+ color: '#007fbb'
+ width: if active then 3 else 0
fill: new ol.style.Fill
color: '#ffffff'
- width: 2
+ width: if active then 3 else 0
addRoutesLabels: ->
- labelsContainer = $("<ul class='routes-labels'></ul>")
- labelsContainer.appendTo $("##{@target}")
- @vectorPtsLayer = null
- @vectorEdgesLayer = null
- @vectorLnsLayer = null
+ menu = new RoutesLayersControl(@routes, this)
+ @map.addControl menu
+ @map.addControl new RoutesLayersButton(menu: menu)
+
+ fitZoom: ()->
+ area = []
+ found = false
Object.keys(@routes).forEach (id)=>
route = @routes[id]
- label = $("<li>#{route.name}</ul>")
- label.appendTo labelsContainer
- label.mouseleave =>
- route.vectorPtsLayer.setStyle @defaultStyles(false)
- route.vectorEdgesLayer.setStyle @edgeStyles(false)
- route.vectorLnsLayer.setStyle @lineStyle(false)
- route.vectorPtsLayer.setZIndex 2
- route.vectorEdgesLayer.setZIndex 3
- route.vectorLnsLayer.setZIndex 1
- @fitZoom()
- label.mouseenter =>
- route.vectorPtsLayer.setStyle @defaultStyles(true)
- route.vectorEdgesLayer.setStyle @edgeStyles(true)
- route.vectorLnsLayer.setStyle @lineStyle(true)
- route.vectorPtsLayer.setZIndex 11
- route.vectorEdgesLayer.setZIndex 12
- route.vectorLnsLayer.setZIndex 10
- @fitZoom(route)
-
- fitZoom: (route)->
- if route
- area = []
- route.stops.forEach (stop, i) =>
- area.push [parseFloat(stop.longitude), parseFloat(stop.latitude)]
- else
- area = @area
+ if route.active
+ found = true
+ route.stops.forEach (stop, i) =>
+ area.push [parseFloat(stop.longitude), parseFloat(stop.latitude)]
+ area = @area unless found
boundaries = ol.extent.applyTransform(
ol.extent.boundingExtent(area), ol.proj.getTransform('EPSG:4326', 'EPSG:3857')
)
diff --git a/app/javascript/packs/referential_lines/show.js b/app/javascript/packs/referential_lines/show.js
index 542188018..99c5072ef 100644
--- a/app/javascript/packs/referential_lines/show.js
+++ b/app/javascript/packs/referential_lines/show.js
@@ -6,5 +6,5 @@ routes = JSON.parse(decodeURIComponent(routes))
var map = new RoutesMap('routes_map')
map.addRoutes(routes)
-// map.addRoutesLabels()
+map.addRoutesLabels()
map.fitZoom()
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 10:59:03 +0000