Merge pull request #559 from sozialhelden/add-mapillary-to-node-detai…

…l-view Add mapillary to node detail view
sozialhelden · Jan 20, 2017 · f2cc051 · f2cc051
2 parents 2a66feb + bfd3f0e
commit f2cc051
Show file tree

Hide file tree

Showing 8 changed files with 36,215 additions and 4 deletions.
diff --git a/app/assets/javascripts/nodes.coffee b/app/assets/javascripts/nodes.coffee
@@ -15,6 +15,7 @@
 #= require jquery/jquery.magnific-popup.js
 #= require responsive-popover
 #= require dropzone
+#= require mapillary
 
 I18n.defaultLocale = 'en'
 I18n.locale = $('html').attr('lang')
@@ -273,4 +274,13 @@ if $dropzoneClickable.length > 0
 
     streetView = new google.maps.StreetViewPanorama element,
       pano: data.location.pano,
-      pov: { heading: heading, pitch: 0 }
+      pov: { heading: heading, pitch: 0 }
+
+  viewer = new Mapillary.Viewer('mapillary', 'YlpkQlEzaFh5R3JJUGRsX1hLTEhhdzo1ZmNjYzBmM2I0YWQyYTYx', null)
+  viewer.moveCloseTo(lat, lon).then(->
+    mapillaryContainer = document.getElementById('mapillary')
+    mapillaryContainer.parentElement.classList.remove('invisible')
+    mapillaryContainer.parentElement.classList.add('visible')
+    viewer.resize()
+  , null).catch (err) ->
+    console.log err
diff --git a/app/assets/stylesheets/relaunch.sass b/app/assets/stylesheets/relaunch.sass
@@ -75,6 +75,8 @@
 @import "compass/typography/text/force-wrap"
 @import "compass/utilities/sprites"
 
+@import "mapillary"
+
 @import relaunch/fonts
 @import relaunch/mixins
 @import relaunch/default

diff --git a/app/assets/stylesheets/relaunch/_nodes.scss b/app/assets/stylesheets/relaunch/_nodes.scss
@@ -758,6 +758,24 @@ $node-photos-width: (100% - $node-photos-gutter * $node-photos-columns) / $node-
   }
 }
 
+.osm-streetview {
+
+  &.invisible {
+    display: none;
+  }
+
+  &.visible {
+    display: block;
+    height: 480px;
+  }
+
+  #mapillary {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
 // @TODO This need to be set for every simliar forms not only for node edit
 .node-form {
   background-color: #F1F0EC;
@@ -918,4 +936,4 @@ $node-photos-width: (100% - $node-photos-gutter * $node-photos-columns) / $node-
   z-index: -1
 }
 
-@import "nodes-new";
+@import "nodes-new";
diff --git a/app/views/nodes/_node_mapillary.html.haml b/app/views/nodes/_node_mapillary.html.haml
@@ -0,0 +1,2 @@
+%section.osm-streetview.invisible
+  #mapillary
diff --git a/app/views/nodes/_node_streetview.html.haml b/app/views/nodes/_node_streetview.html.haml
@@ -7,4 +7,4 @@
         - if node_streetview.osm_id < 0
           = link_to t('nodes.show.show-in-osm'), "http://openstreetmap.org/browse/way/#{node_streetview.osm_id.abs}"
         - else
-          = link_to t('nodes.show.show-in-osm'), "http://openstreetmap.org/browse/node/#{node_streetview.osm_id}"
+          = link_to t('nodes.show.show-in-osm'), "http://openstreetmap.org/browse/node/#{node_streetview.osm_id}"
diff --git a/app/views/nodes/show.html.haml b/app/views/nodes/show.html.haml
@@ -11,6 +11,7 @@
           = render partial: 'node_photos', object: @node
           = render partial: 'node_note', object: @node
           = render partial: 'node_streetview', object: @node
+          = render partial: 'node_mapillary', object: @node
 
         %section.node-aside.span4
           = render partial: 'node_edit', object: @node
@@ -25,4 +26,4 @@
 
 - content_for :head do
   %title=t('nodes.show.header.meta.title', name: [@node.name, @node.node_type_name, @node.category_name, @node.region_name].compact.join(', '))
-  %meta{:name => 'description', :content => t('nodes.show.header.meta.description')}
+  %meta{:name => 'description', :content => t('nodes.show.header.meta.description')}