fixes for Heroku staging/prod

docker-compose.yml

@@ -49,8 +49,7 @@ services:
     depends_on:
       - db
     volumes:
-      - bundler:/usr/local/bundle
-      - ./rails:/api
+      - ./rails:/opt/terrastories:cached
 
   selenium:
     # Debug version enables VNC ability

rails/Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:2.5.31-slim
+FROM ruby:2.5.1-slim
 ARG precompileassets
 
 RUN apt-get update && apt-get install -y curl gnupg

rails/app/javascript/components/Map.jsx

@@ -30,13 +30,13 @@ export default class Map extends Component {
 
   componentDidMount() {
     this.map = new mapboxgl.Map({
-      container: this.mapContainer,
-      style: this.props.mapboxStyle,
-      center: [this.props.centerLong, this.props.centerLat],
-      zoom: this.props.zoom,
-      maxBounds: this.checkBounds(), // check for bounding box presence
-      pitch: this.props.pitch,
-      bearing: this.props.bearing
+        container: this.mapContainer,
+        style: this.props.mapboxStyle,
+        center: [this.props.centerLong, this.props.centerLat],
+        zoom: this.props.zoom,
+        maxBounds: this.checkBounds(), // check for bounding box presence
+        pitch: this.props.pitch,
+        bearing: this.props.bearing
     });
 
     this.map.on("load", () => {
@@ -56,7 +56,6 @@ export default class Map extends Component {
         }
       });
 
-
       // Add 3d terrain DEM layer if activated
       if(!this.props.useLocalMapServer && this.props.mapbox3d) {
         this.map.addSource('mapbox-dem', {
@@ -65,10 +64,10 @@ export default class Map extends Component {
           'tileSize': 512,
           'maxzoom': 14
         });
-
+    
         // add the DEM source as a terrain layer with exaggerated height
         this.map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
-
+          
         // add a sky layer that will show when the map is highly pitched
         this.map.addLayer({
           'id': 'sky',
@@ -87,18 +86,19 @@ export default class Map extends Component {
       this.addMarkerClickHandler();
     });
 
-        // Hide minimap for offline Terrastories
+    // Hide minimap and nav controls for offline Terrastories
     if(!this.props.useLocalMapServer) {
       this.map.addControl(new mapboxgl.Minimap(), "top-right");
     }
 
     this.map.addControl(new mapboxgl.NavigationControl());
-        // Change mouse pointer when hovering over ts-marker points
-        this.map.on('mouseenter', STORY_POINTS_LAYER_ID, () => {
-          this.map.getCanvas().style.cursor = 'pointer'
-        })
-        this.map.on('mouseleave', STORY_POINTS_LAYER_ID, () => {
-          this.map.getCanvas().style.cursor = ''
+
+    // Change mouse pointer when hovering over ts-marker points
+    this.map.on('mouseenter', STORY_POINTS_LAYER_ID, () => {
+      this.map.getCanvas().style.cursor = 'pointer'
+    })
+    this.map.on('mouseleave', STORY_POINTS_LAYER_ID, () => {
+      this.map.getCanvas().style.cursor = ''
     })
   }
 
@@ -185,11 +185,11 @@ export default class Map extends Component {
 
   resetMapToCenter() {
     this.map.flyTo({
-      center: [this.props.centerLong, this.props.centerLat],
-      zoom: this.props.zoom,
-      pitch: this.props.pitch,
-      bearing: this.props.bearing,
-      maxBounds: this.checkBounds(), // check for bounding box presence
+        center: [this.props.centerLong, this.props.centerLat],
+        zoom: this.props.zoom,
+        pitch: this.props.pitch,
+        bearing: this.props.bearing,
+        maxBounds: this.checkBounds(), // check for bounding box presence
     });
   }
 
@@ -225,11 +225,11 @@ export default class Map extends Component {
     return <div ref={el => (this.mapContainer = el)} className="ts-MainMap" />;
   }
 
-  // test for bounding box presence
+// test for bounding box presence
   checkBounds() {
     let mapBounds = null;
-    if (this.props.sw_boundary_long != null && this.props.sw_boundary_lat != null 
-    && this.props.ne_boundary_long != null && this.props.ne_boundary_lat != null) {
+    if (this.props.sw_boundary_long != null && this.props.sw_boundary_lat != null
+        && this.props.ne_boundary_long != null && this.props.ne_boundary_lat != null) {
         mapBounds = [
             [this.props.sw_boundary_long, this.props.sw_boundary_lat], //southwest
             [this.props.ne_boundary_long, this.props.ne_boundary_lat] //northeast

rails/app/javascript/components/Popup.jsx

@@ -2,21 +2,20 @@ import React from "react";
 
 const Popup = (props) => {
   const { id, name, photo_url, name_audio_url, description, region, type_of_place } = props.feature.properties;
-
   return (
     <div id={`popup-${id}`}>
       <div className="ts-markerPopup-header">
         <h1>{name}</h1>
         <button className="ts-markerPopup-header-button" onClick={props.onCloseClick}>✕</button>
       </div>
       <div className="ts-markerPopup-content">
-        {photo_url && (<img src={photo_url} />)}
-        {name_audio_url && (<div><span className="ts-markerPopup-label">{I18n.t("place_name")}:</span>
+        {String(photo_url) !== "null" && (<img src={photo_url} />)}
+        {String(name_audio_url) !== "null" && (<div><span className="ts-markerPopup-label">{I18n.t("place_name")}:</span>
                                                       <audio className="ts-markerPopup-audio"
                                                       controls
                                                       controlsList="nodownload"
                                                       src={name_audio_url}> </audio></div>)}
-        {description && (<div className="ts-markerPopup-description">{description}</div>)}
+        {description !== "null" && (<div className="ts-markerPopup-description">{description}</div>)}
         {region && (<div><span className="ts-markerPopup-label">{I18n.t("region")}:</span> {region}</div>)}
         {type_of_place && (<div><span className="ts-markerPopup-label">{I18n.t("place_type")}:</span> {type_of_place}</div>)}
       </div>