Show cesium map information/help section

- Optionally show a help panel in the ToolbarView - The help panel can display navigation instructions and feedback text - All of this is configurable in the map config Issue #2173
NCEAS · Nov 2, 2023 · de40dcc · de40dcc
1 parent 48c9b2c
commit de40dcc
Show file tree

Hide file tree

Showing 5 changed files with 514 additions and 15 deletions.
diff --git a/src/css/map-view.css b/src/css/map-view.css
@@ -126,7 +126,7 @@
 
 /* ---- BADGE ---- */
 
-.map-view__badge{
+.map-view__badge {
   padding: 0.4em 0.5em 0.3em 0.55em;
   margin: 0 -0.2rem 0 0.3rem;
   font-size: 0.62rem;
@@ -140,24 +140,25 @@
   font-weight: 500;
 }
 
-.map-view__badge--blue{
+.map-view__badge--blue {
   background-color: var(--map-col-blue);
   filter: none;
 }
 
-.map-view__badge--green{
+.map-view__badge--green {
   background-color: var(--map-col-green);
   filter: none;
 }
 
-.map-view__badge--yellow{
+.map-view__badge--yellow {
   background-color: var(--map-col-yellow);
   color: var(--map-col-bkg-lighter);
   filter: none;
   font-weight: 600;
   opacity: 0.9;
 }
-.map-view__badge--contrast{
+
+.map-view__badge--contrast {
   background-color: var(--map-col-text);
   color: var(--map-col-bkg);
   opacity: 0.8;
@@ -612,23 +613,24 @@ represents 1 unit of the given distance measurement. */
   border-radius: var(--map-border-radius);
 }
 
-.layer-details__notification--blue{
+.layer-details__notification--blue {
   background-color: var(--map-col-blue);
   filter: none;
 }
 
-.layer-details__notification--green{
+.layer-details__notification--green {
   background-color: var(--map-col-green);
   filter: none;
 }
 
-.layer-details__notification--yellow{
+.layer-details__notification--yellow {
   background-color: var(--map-col-yellow);
   color: var(--map-col-bkg-lighter);
   filter: none;
   opacity: 0.9;
 }
-.layer-details__notification--contrast{
+
+.layer-details__notification--contrast {
   background-color: var(--map-col-text);
   color: var(--map-col-bkg);
   opacity: 0.95;
@@ -972,3 +974,93 @@ other class: .ui-slider-range */
   grid-auto-rows: min-content;
   grid-gap: 1rem;
 }
+
+/*****************************************************************************************
+ *
+ * Help panel
+ *
+ * Panel that shows navigation and other help information
+ *
+ */
+
+.map-help-panel{
+  width: 100%;
+}
+
+.nav-help {
+  background-color: var(--map-col-bkg-lighter);
+  border-radius: var(--map-border-radius);
+}
+
+.nav-help .map-view__button {
+  background-color: var(--map-col-bkg-lighter);
+  padding: 0.65rem 0.9rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  opacity: 0.8;
+}
+
+.nav-help .map-view__button--active {
+  background-color: var(--map-col-bkg-lightest);
+  opacity: 1;
+}
+
+.nav-help__img {
+  height: 48px;
+  width: 70px;
+}
+
+.nav-help__instructions {
+  display: grid;
+  width: 100%;
+  gap: 0.8rem;
+  padding: 0.8rem 0.4rem;
+  background-color: var(--map-col-bkg-lightest);
+  border-radius: var(--map-border-radius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-help__instructions.hidden {
+  display: none;
+}
+
+.cesium-navigation-help-pan {
+  color: #66ccff;
+  font-weight: bold;
+}
+
+.cesium-navigation-help-zoom {
+  color: #65fd00;
+  font-weight: bold;
+}
+
+.cesium-navigation-help-rotate {
+  color: #ffd800;
+  font-weight: bold;
+}
+
+.cesium-navigation-help-tilt {
+  color: #d800d8;
+  font-weight: bold;
+}
+
+.nav-help__instruction {
+  display: grid;
+  grid-template-columns: 70px auto;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.map-help-panel__title{
+  text-transform: uppercase;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  margin: 0 0 0.8rem 0;
+  line-height: normal;
+}
+
+.map-help-panel__section:not(:first-child) {
+  margin-top: 2.5rem;
+}
diff --git a/src/js/models/maps/Map.js b/src/js/models/maps/Map.js
@@ -42,8 +42,8 @@ define([
        * side bar with layer list, etc. If true, the {@link MapView} will render
        * a {@link ToolbarView}.
        * @property {Boolean} [showLayerList=true] - Whether or not to show the
-       * layer list in the toolbar. If true, the {@link ToolbarView} will
-       * render a {@link LayerListView}.
+       * layer list in the toolbar. If true, the {@link ToolbarView} will render
+       * a {@link LayerListView}.
        * @property {Boolean} [showHomeButton=true] - Whether or not to show the
        * home button in the toolbar.
        * @property {Boolean} [toolbarOpen=false] - Whether or not the toolbar is
@@ -56,6 +56,17 @@ define([
        * users to click on map features to show more information about them. If
        * true, the {@link MapView} will render a {@link FeatureInfoView} and
        * will initialize "picking" in the {@link CesiumWidgetView}.
+       * @property {String} [clickFeatureAction="showDetails"] - The default
+       * action to take when a user clicks on a feature on the map. The
+       * available options are "showDetails" (show the feature details in the
+       * sidebar) or "zoom" (zoom to the feature's location).
+       * @property {Boolean} [showNavHelp=true] - Whether or not to show
+       * navigation instructions in the toolbar.
+       * @property {Boolean} [showFeedback=false] - Whether or not to show a
+       * feedback section in the toolbar with the text specified in
+       * feedbackText.
+       * @property {String} [feedbackText=null] - The text to show in the
+       * feedback section. showFeedback must be true for this to be shown.
        *
        * @example
        * {
@@ -159,6 +170,12 @@ define([
        * action to take when a user clicks on a feature on the map. The
        * available options are "showDetails" (show the feature details in the
        * sidebar) or "zoom" (zoom to the feature's location).
+       * @property {Boolean} [showNavHelp=true] - Whether or not to show
+       * navigation instructions in the toolbar.
+       * @property {Boolean} [showFeedback=false] - Whether or not to show a
+       * feedback section in the toolbar.
+       * @property {String} [feedbackText=null] - The text to show in the
+       * feedback section.
        */
       defaults: function () {
         return {
@@ -184,6 +201,9 @@ define([
           showScaleBar: true,
           showFeatureInfo: true,
           clickFeatureAction: "showDetails",
+          showNavHelp: true,
+          showFeedback: false,
+          feedbackText: null
         };
       },
 

diff --git a/src/js/templates/maps/cesium-nav-help.html b/src/js/templates/maps/cesium-nav-help.html
@@ -0,0 +1,107 @@
+<div class="nav-help">
+  <button
+    type="button"
+    class="map-view__button"
+    id="<%= mouseButtonId %>">
+    <img
+      src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/Mouse.svg"
+      style="width: 25px; height: 25px" />
+    Mouse
+  </button>
+  <button
+    type="button"
+    class="map-view__button"
+    id="<%= touchButtonId %>">
+    <img
+      src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/Touch.svg"
+      style="width: 25px; height: 25px" />
+    Touch
+  </button>
+
+  <div
+    class="nav-help__instructions"
+    id="<%= mouseSectionId %>">
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/MouseLeft.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-pan">Pan view</div>
+        <div class="cesium-navigation-help-details">Left click + drag</div>
+      </div>
+    </div>
+
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/MouseRight.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-zoom">Zoom view</div>
+        <div class="cesium-navigation-help-details">Right click + drag, or</div>
+        <div class="cesium-navigation-help-details">Mouse wheel scroll</div>
+      </div>
+    </div>
+
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/MouseMiddle.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-rotate">Rotate view</div>
+        <div class="cesium-navigation-help-details">
+          Middle click + drag, or
+        </div>
+        <div class="cesium-navigation-help-details">
+          CTRL + Left/Right click + drag
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="nav-help__instructions"
+    id="<%= touchSectionId %>">
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/TouchDrag.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-pan">Pan view</div>
+        <div class="cesium-navigation-help-details">One finger drag</div>
+      </div>
+    </div>
+
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/TouchZoom.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-zoom">Zoom view</div>
+        <div class="cesium-navigation-help-details">Two finger pinch</div>
+      </div>
+    </div>
+
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/TouchTilt.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-rotate">Tilt view</div>
+        <div class="cesium-navigation-help-details">
+          Two finger drag, same direction
+        </div>
+      </div>
+    </div>
+    <div class="nav-help__instruction">
+      <img
+        src="<%= cesiumUrl %>Widgets/Images/NavigationHelp/TouchRotate.svg"
+        class="nav-help__img" />
+      <div class="nav-help__text">
+        <div class="cesium-navigation-help-tilt">Rotate view</div>
+        <div class="cesium-navigation-help-details">
+          Two finger drag, opposite direction
+        </div>
+      </div>
+    </div>
+  </div>
+</div>