Merge pull request #336 from af83/enhance-map-with-several-routes

Enhance map with several routes

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'