aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/stylesheets/OpenLayers/custom.sass57
-rw-r--r--app/javascript/helpers/routes_map.coffee130
-rw-r--r--app/javascript/packs/referential_lines/show.js2
-rw-r--r--app/views/referential_lines/show.html.slim2
4 files changed, 125 insertions, 66 deletions
diff --git a/app/assets/stylesheets/OpenLayers/custom.sass b/app/assets/stylesheets/OpenLayers/custom.sass
index fa874d924..013c056d6 100644
--- a/app/assets/stylesheets/OpenLayers/custom.sass
+++ b/app/assets/stylesheets/OpenLayers/custom.sass
@@ -2,15 +2,20 @@
.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
- list-style-type: none
- flex: 1 0 25%
+ width: 30%
+ background-color: transparentize(white, 0.2)
+ border-radius: 3px
+ max-height: 90%
+ overflow-y: scroll
+ a
+ display: block
+ width: calc(100% - 10px)
border: 1px solid $lightgrey
padding: 5px
margin: 5px
@@ -18,11 +23,21 @@
cursor: pointer
color: $blue
white-space: nowrap
-
+ text-overflow: ellipsis
+ overflow: hidden
+ font-size: 0.6em
&:hover
- background: $orange
+ text-decoration: none
+
+ &.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 +70,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..42377cd6e 100644
--- a/app/javascript/helpers/routes_map.coffee
+++ b/app/javascript/helpers/routes_map.coffee
@@ -1,3 +1,65 @@
+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('a')
+ label.title = route.name
+ label.className = 'active'
+ label.innerHTML = route.name
+ element.appendChild label
+ label.addEventListener "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()
+ label.addEventListener "mouseenter", =>
+ route.vectorPtsLayer.setStyle routes_map.defaultStyles(true)
+ route.vectorEdgesLayer.setStyle routes_map.edgeStyles(true)
+ route.vectorLnsLayer.setStyle routes_map.lineStyle(true)
+
+ label.addEventListener "mouseleave", =>
+ route.vectorPtsLayer.setStyle routes_map.defaultStyles(route.active)
+ route.vectorEdgesLayer.setStyle routes_map.edgeStyles(route.active)
+ route.vectorLnsLayer.setStyle routes_map.lineStyle(route.active)
+
+
+ ol.control.Control.call(this, {
+ element
+ })
+
+ol.inherits RoutesLayersControl, ol.control.Control
+
class RoutesMap
constructor: (@target)->
@initMap()
@@ -20,6 +82,7 @@ class RoutesMap
addRoute: (route)->
geoColPts = []
geoColLns = []
+ route.active = true
@routes[route.id] = route if route.id
stops = route.stops || route
geoColEdges = [
@@ -77,68 +140,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()
diff --git a/app/views/referential_lines/show.html.slim b/app/views/referential_lines/show.html.slim
index 5ea0e31bb..ef32ef6b0 100644
--- a/app/views/referential_lines/show.html.slim
+++ b/app/views/referential_lines/show.html.slim
@@ -82,6 +82,6 @@
= replacement_msg t('routes.search_no_results')
= javascript_tag do
- | window.routes = "#{URI.escape(@routes.map{|r| {name: r.name, id: r.id, stops: route_json_for_edit(r, serialize: false)}}.to_json)}"
+ | window.routes = "#{URI.escape(@routes.select{|r| r.wayback == :outbound}.map{|r| {name: r.name, id: r.id, stops: route_json_for_edit(r, serialize: false)}}.to_json)}"
= javascript_pack_tag 'referential_lines/show.js'
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 07:15:12 +0000