aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/javascripts/es6_browserified/itineraries/show.js15
-rw-r--r--app/assets/stylesheets/OpenLayers/custom.sass63
-rw-r--r--app/assets/stylesheets/OpenLayers/ol.css227
-rw-r--r--app/assets/stylesheets/application.sass2
-rw-r--r--app/assets/stylesheets/base.sass3
-rw-r--r--app/assets/stylesheets/components/_olMap.sass27
-rw-r--r--app/views/routes/show.html.slim6
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'
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 18:05:12 +0000