Refs #3377: updating maps layout on routes#show

7 files changed, 304 insertions, 39 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/show.js b/app/assets/javascripts/es6_browserified/itineraries/show.js
index ca6606ef1..79a11701f 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/show.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/show.js
@@ -27,20 +27,20 @@ var edgeStyles = new ol.style.Style({
   image: new ol.style.Circle(({
     radius: 5,
     stroke: new ol.style.Stroke({
-      color: '#ff0000',
+      color: '#007fbb',
       width: 2
     }),
     fill: new ol.style.Fill({
-      color: '#ffffff',
+      color: '#007fbb',
       width: 2
     })
   }))
 })
 var defaultStyles = new ol.style.Style({
   image: new ol.style.Circle(({
-    radius: 5,
+    radius: 4,
     stroke: new ol.style.Stroke({
-      color: '#004d87',
+      color: '#007fbb',
       width: 2
     }),
     fill: new ol.style.Fill({
@@ -51,8 +51,8 @@ var defaultStyles = new ol.style.Style({
 })
 var lineStyle = new ol.style.Style({
   stroke: new ol.style.Stroke({
-      color: '#0000ff',
-      width: 4
+      color: '#007fbb',
+      width: 3
   })
 })
 
@@ -94,7 +94,6 @@ var map = new ol.Map({
   }),
   view: new ol.View({
     center: ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]),
-    zoom: 10
+    zoom: 13
   })
 });
-
diff --git a/app/assets/stylesheets/OpenLayers/custom.sass b/app/assets/stylesheets/OpenLayers/custom.sass
index a13f6c831..7a5b4baf1 100644
--- a/app/assets/stylesheets/OpenLayers/custom.sass
+++ b/app/assets/stylesheets/OpenLayers/custom.sass
@@ -1,5 +1,64 @@
 .map
-  // ...
-
   .list-group-item &
     margin-top: 15px
+
+
+  .ol-scale-line
+    background-color: transparent
+    bottom: 5px
+    right: 5px
+    left: auto
+    padding: 3px
+    position: absolute
+
+    .ol-scale-line-inner
+      position: relative
+      border: none
+      border-bottom: 2px solid $darkblue
+      border-top: none
+      color: $darkblue
+      font-size: 0.85em
+      text-align: center
+      font-weight: 700
+
+      &:before
+        content: ''
+        display: block
+        position: absolute
+        left: 0
+        bottom: 0
+        right: 0
+        height: 5px
+        border-left: 2px solid $darkblue
+        border-right: 2px solid $darkblue
+
+  .ol-zoom
+    background-color: transparent
+
+    .ol-zoom-in, .ol-zoom-out
+      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-out
+      margin-top: 1px
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+
+  .ol-zoomslider
+    margin: 2px
+    width: calc(1.375em + 4px)
+    background-color: rgba($darkblue, 0.25)
+
+    button.ol-zoomslider-thumb
+      margin: 0 -2px 0 -2px
+      padding: 0 2px
+      background-color: $darkblue
+      color: #fff
+      border-radius: 0
+      z-index: 5
diff --git a/app/assets/stylesheets/OpenLayers/ol.css b/app/assets/stylesheets/OpenLayers/ol.css
index ea50e7ebe..02c19f3af 100644
--- a/app/assets/stylesheets/OpenLayers/ol.css
+++ b/app/assets/stylesheets/OpenLayers/ol.css
@@ -1 +1,226 @@
-.ol-control,.ol-scale-line{position:absolute;padding:2px}.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}
\ No newline at end of file
+.ol-control,.ol-scale-line {
+  position:absolute;
+  padding:2px
+}
+.ol-box {
+  box-sizing:border-box;
+  border-radius:2px;
+  border:2px solid #00f
+}
+.ol-mouse-position {
+  top:8px;
+  right:8px;
+  position:absolute
+}
+.ol-scale-line {
+  background:rgba(0,60,136,.3);
+  border-radius:4px;
+  bottom:8px;
+  left:8px
+}
+.ol-scale-line-inner {
+  border:1px solid #eee;
+  border-top:none;
+  color:#eee;
+  font-size:10px;
+  text-align:center;
+  margin:1px;
+  will-change:contents,width
+}
+.ol-overlay-container {
+  will-change:left,right,top,bottom
+}
+.ol-unsupported {
+  display:none
+}
+.ol-viewport .ol-unselectable {
+  -webkit-touch-callout:none;
+  -webkit-user-select:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  -webkit-tap-highlight-color:transparent
+}
+.ol-control {
+  background-color:rgba(255,255,255,.4);
+  border-radius:4px
+}
+.ol-control:hover {
+  background-color:rgba(255,255,255,.6)
+}
+.ol-zoom {
+  top:.5em;
+  left:.5em
+}
+.ol-rotate{
+  top:.5em;
+  right:.5em;
+  transition:opacity .25s linear,visibility 0s linear
+}
+.ol-rotate.ol-hidden {
+  opacity:0;
+  visibility:hidden;
+  transition:opacity .25s linear,visibility 0s linear .25s
+}
+.ol-zoom-extent {
+  top:4.643em;
+  left:.5em
+}
+.ol-full-screen {
+  right:.5em;
+  top:.5em
+}
+@media print{
+  .ol-control{
+    display:none
+  }
+}
+.ol-control button {
+  display:block;
+  margin:1px;
+  padding:0;
+  color:#fff;
+  font-size:1.14em;
+  font-weight:700;
+  text-decoration:none;
+  text-align:center;
+  height:1.375em;
+  width:1.375em;
+  line-height:.4em;
+  background-color:rgba(0,60,136,.5);
+  border:none;
+  border-radius:2px
+}
+.ol-control button::-moz-focus-inner {
+  border:none;
+  padding:0
+}
+.ol-zoom-extent button {
+  line-height:1.4em
+}
+.ol-compass {
+  display:block;
+  font-weight:400;
+  font-size:1.2em;
+  will-change:transform
+}
+.ol-touch .ol-control button {
+  font-size:1.5em
+}
+.ol-touch .ol-zoom-extent {
+  top:5.5em
+}
+.ol-control button:focus,.ol-control button:hover {
+  text-decoration:none;
+  background-color:rgba(0,60,136,.7)
+}
+.ol-zoom .ol-zoom-in {
+  border-radius:2px 2px 0 0
+}
+.ol-zoom .ol-zoom-out {
+  border-radius:0 0 2px 2px
+}
+.ol-attribution {
+  text-align:right;
+  bottom:.5em;
+  right:.5em;
+  max-width:calc(100% - 1.3em)
+}
+.ol-attribution ul {
+  margin:0;
+  padding:0 .5em;
+  font-size:.7rem;
+  line-height:1.375em;
+  color:#000;
+  text-shadow:0 0 2px #fff
+}
+.ol-attribution li {
+  display:inline;
+  list-style:none;
+  line-height:inherit
+}
+.ol-attribution li:not(:last-child):after {
+  content:" "
+}
+.ol-attribution img {
+  max-height:2em;
+  max-width:inherit;
+  vertical-align:middle
+}
+.ol-attribution button,.ol-attribution ul {
+  display:inline-block
+}
+.ol-attribution.ol-collapsed ul {
+  display:none
+}
+.ol-attribution.ol-logo-only ul {
+  display:block
+}
+.ol-attribution:not(.ol-collapsed) {
+  background:rgba(255,255,255,.8)
+}
+.ol-attribution.ol-uncollapsible {
+  bottom:0;
+  right:0;
+  border-radius:4px 0 0;
+  height:1.1em;
+  line-height:1em
+}
+.ol-attribution.ol-logo-only {
+  background:0 0;
+  bottom:.4em;
+  height:1.1em;
+  line-height:1em
+}
+.ol-attribution.ol-uncollapsible img {
+  margin-top:-.2em;
+  max-height:1.6em
+}
+.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button {
+  display:none
+}
+.ol-zoomslider {
+  top:4.5em;
+  left:.5em;
+  height:200px
+}
+.ol-zoomslider button {
+  position:relative;
+  height:10px
+}
+.ol-touch .ol-zoomslider {
+  top:5.5em
+}
+.ol-overviewmap {
+  left:.5em;
+  bottom:.5em
+}
+.ol-overviewmap.ol-uncollapsible {
+  bottom:0;
+  left:0;
+  border-radius:0 4px 0 0
+}
+.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button {
+  display:inline-block
+}
+.ol-overviewmap .ol-overviewmap-map {
+  border:1px solid #7b98bc;
+  height:150px;
+  margin:2px;
+  width:150px
+}
+.ol-overviewmap:not(.ol-collapsed) button {
+  bottom:1px;
+  left:2px;
+  position:absolute
+}
+.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button {
+  display:none
+}
+.ol-overviewmap:not(.ol-collapsed) {
+  background:rgba(255,255,255,.8)
+}
+.ol-overviewmap-box {
+  border:2px dotted rgba(0,60,136,.7)
+}
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 47cccba65..e3f776640 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -5,6 +5,8 @@
 @import 'base/config'
 @import 'base/utilities'
 
+@import 'OpenLayers/custom'
+
 @import 'typography/fonts'
 @import 'typography/sboiv'
 @import 'typography/typography'
diff --git a/app/assets/stylesheets/base.sass b/app/assets/stylesheets/base.sass
index 3035fd64c..83d92076c 100644
--- a/app/assets/stylesheets/base.sass
+++ b/app/assets/stylesheets/base.sass
@@ -13,3 +13,6 @@
 // Select2
 @import 'select2'
 @import 'select2-bootstrap'
+
+// OL3
+@import 'OpenLayers/ol'
diff --git a/app/assets/stylesheets/components/_olMap.sass b/app/assets/stylesheets/components/_olMap.sass
index acbbbeade..9aaad78dc 100644
--- a/app/assets/stylesheets/components/_olMap.sass
+++ b/app/assets/stylesheets/components/_olMap.sass
@@ -35,30 +35,3 @@
 .map
   height: 300px
   width: 100%
-
-.ol-scale-line
-  // background-color: rgba($blue, 0.5)
-  bottom: 5px
-  right: 5px
-  padding: 3px
-  position: absolute
-
-  .ol-scale-line-inner
-    position: relative
-    border-bottom: 1px solid $darkgrey
-    border-top: none
-    color: $blue
-    font-size: 0.85em
-    text-align: center
-    font-weight: 700
-
-    &:before
-      content: ''
-      display: block
-      position: absolute
-      left: 0
-      bottom: 0
-      right: 0
-      height: 5px
-      border-left: 1px solid $darkgrey
-      border-right: 1px solid $darkgrey
diff --git a/app/views/routes/show.html.slim b/app/views/routes/show.html.slim
index d779a8648..12a2708ac 100644
--- a/app/views/routes/show.html.slim
+++ b/app/views/routes/show.html.slim
@@ -30,10 +30,13 @@
             @route.human_attribute_name(:wayback) => (@route.wayback ? @route.wayback_text : '-' ),
             @route.human_attribute_name(:opposite_route) => (@route.opposite_route ? @route.opposite_route.name : '-') }
 
+      - if @route_sp.any?
+        .col-lg-6.col-md-6.col-sm-12.col-xs-12
+          #route_map.map.mb-lg
+      
     .row
       .col-lg-12
         - if @route_sp.any?
-          #route_map.map
           = table_builder @route_sp,
             { 'ID Reflex' => Proc.new {|s| s.try(:stop_area).try(:user_objectid)},
               :name => Proc.new {|s| s.try(:stop_area).try(:name)},
@@ -49,6 +52,7 @@
 
         - else
           = replacement_msg t('stop_areas.search_no_results')
+
 = javascript_tag do
   | window.route = "#{URI.escape(route_json_for_edit(@route))}"
 = javascript_include_tag 'es6_browserified/itineraries/show.js'