From 2be6e735086d08fd6f7835ce413c92c6978f01bb Mon Sep 17 00:00:00 2001 From: Zog Date: Fri, 2 Feb 2018 08:21:43 +0100 Subject: Better UI for maps showing mltiple routes --- app/assets/stylesheets/OpenLayers/custom.sass | 48 ++++++---- app/javascript/helpers/routes_map.coffee | 121 ++++++++++++++++--------- app/javascript/packs/referential_lines/show.js | 2 +- 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 = $("") - 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 = $("
  • #{route.name}") - 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() -- cgit v1.2.3 From 897d0ad6b48f063f40144a1dbb770f4fbc5f96f0 Mon Sep 17 00:00:00 2001 From: Zog Date: Fri, 23 Feb 2018 10:42:23 +0100 Subject: Hide opposite routes --- app/javascript/helpers/routes_map.coffee | 12 ++++++++++-- app/views/referential_lines/show.html.slim | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/app/javascript/helpers/routes_map.coffee b/app/javascript/helpers/routes_map.coffee index dea916ebd..479169995 100644 --- a/app/javascript/helpers/routes_map.coffee +++ b/app/javascript/helpers/routes_map.coffee @@ -35,7 +35,6 @@ RoutesLayersControl = (routes, routes_map) -> label.innerHTML = route.name element.appendChild label label.addEventListener "click", => - console.log "click" route.active = !route.active $(label).toggleClass "active" route.active @@ -43,7 +42,16 @@ RoutesLayersControl = (routes, routes_map) -> 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 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' -- cgit v1.2.3 From 54fd846e3d8130bd126d684f3834260affc90bfe Mon Sep 17 00:00:00 2001 From: Zog Date: Fri, 2 Mar 2018 11:06:24 +0100 Subject: Show labels on a signle column Display full name on hover --- app/assets/stylesheets/OpenLayers/custom.sass | 15 ++++++++------- app/javascript/helpers/routes_map.coffee | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/OpenLayers/custom.sass b/app/assets/stylesheets/OpenLayers/custom.sass index 21f5233e5..013c056d6 100644 --- a/app/assets/stylesheets/OpenLayers/custom.sass +++ b/app/assets/stylesheets/OpenLayers/custom.sass @@ -7,16 +7,15 @@ right: 42px top: .5em padding: 0 - display: flex - justify-content: space-between - flex-wrap: wrap margin: 5px -5px - max-width: 80% + width: 30% background-color: transparentize(white, 0.2) border-radius: 3px - div - list-style-type: none - flex: 1 0 15% + max-height: 90% + overflow-y: scroll + a + display: block + width: calc(100% - 10px) border: 1px solid $lightgrey padding: 5px margin: 5px @@ -27,6 +26,8 @@ text-overflow: ellipsis overflow: hidden font-size: 0.6em + &:hover + text-decoration: none &.active background: $blue diff --git a/app/javascript/helpers/routes_map.coffee b/app/javascript/helpers/routes_map.coffee index 479169995..42377cd6e 100644 --- a/app/javascript/helpers/routes_map.coffee +++ b/app/javascript/helpers/routes_map.coffee @@ -30,7 +30,8 @@ RoutesLayersControl = (routes, routes_map) -> Object.keys(routes).forEach (id)=> route = routes[id] route.active = true - label = document.createElement('div') + label = document.createElement('a') + label.title = route.name label.className = 'active' label.innerHTML = route.name element.appendChild label -- cgit v1.2.3