Google route map control

src/app/api.js

@@ -6,6 +6,10 @@ import G3W_CONSTANT from 'constant';
 
 import ApplicationState from 'store/application-state';
 import ApplicationService from 'services/application';
+/**
+ * @since 3.9.0
+ */
+import ScriptsRegister from 'store/scripts';
 
 /**
  * Single File Components
@@ -265,17 +269,18 @@ module.exports = {
 
   // G3W-SUITE debug info
   info: () => {
-    $script(
-      'https://unpkg.com/[email protected]/platform.js',
-      () => {
+    ScriptsRegister.load({
+      url: 'https://unpkg.com/[email protected]/platform.js',
+      callback: () => {
         window.console.info(`
 [g3wsdk.info]\n
 - g3w-admin: __${initConfig.version}__
 - g3w-client: __${G3W_CONSTANT.APP_VERSION}__
 - browser: __${platform.name} ${platform.version}__
 - operating system: __${platform.os.toString()}__
 `.trim());
-      });
+      }
+    })
   },
 
   // G3W-CLIENT version

src/app/constant.js

@@ -562,6 +562,12 @@ export const FONT_AWESOME_ICONS = {
   crop: "fas fa-crop-alt",
   exit: "fas fa-door-open",
   slider: "fas fa-sliders-h",
+  car: "fas fa-car",
+  walking: "fas fa-walking",
+  /**
+   * @since 3.9.0
+   */
+  route: "fas fa-route",
 
   /**
    * @since 3.8.0
@@ -577,7 +583,18 @@ export const FONT_AWESOME_ICONS = {
    * @since 3.8.0
    */
   share: "fas fa-share",
-
+  /**
+   * @since 3.9.0
+   */
+  'circle-close': "far fa-times-circle",
+  /**
+   * @since 3.9.0
+   */
+  'bicycle': "fas fa-bicycle",
+  /**
+   * @since 3.9.0
+   */
+  'bus': "fas fa-bus",
 };
 
 /**

src/app/g3w-ol/controls/interactioncontrol.js

@@ -21,7 +21,9 @@ const InteractionControl = function(options={}) {
     toggledTool,
     interactionClassOptions={},
     layers=[],
-    spatialMethod
+    spatialMethod,
+    //since 3.8.1
+    controlItems,
   } = options;
 
   /**
@@ -79,6 +81,11 @@ const InteractionControl = function(options={}) {
 
   this.toggledTool;
 
+  /**
+   * @since 3.9.0
+   */
+  this.controlItemsElement;
+
   this._interactionClassOptions = interactionClassOptions;
 
   options.buttonClickHandler = InteractionControl.prototype._handleClick.bind(this);
@@ -100,6 +107,10 @@ const InteractionControl = function(options={}) {
     this.createControlTool(toggledTool);
   }
 
+  if (controlItems) {
+    this.createControlItems(controlItems);
+  }
+
   // set enabled
   this.setEnable(enabled);
 
@@ -225,6 +236,15 @@ proto.disable = function() {
   $(this.element).addClass('g3w-disabled');
 };
 
+/**
+ * @since 3.9.0
+ */
+
+proto.createControlItems = function(controlItems={}){
+  const {component} = controlItems;
+  this.controlItemsElement = new Vue(component).$mount().$el;
+}
+
 /**
  * @param {{ type: {'spatialMethod' | 'custom'}, component: unknown, how: {'toggled' | 'hover'} }} toggledTool 
  */
@@ -235,39 +255,44 @@ proto.createControlTool = function(toggledTool={}) {
    *  'hover' =>  (show button tool as info help)
    * }
    */
-  const {type, component, how="toggled"} = toggledTool;
+  const {type, component, how="toggled", title, showIcon, iconClass, userMessageType} = toggledTool;
   switch(type) {
     case 'spatialMethod':
       const method = this.getSpatialMethod();
       this.toggledTool = {
-        data() {
-          this.methods = SPATIAL_METHODS;
-          return {
-            method
+        title,
+        component: {
+          data() {
+            this.methods = SPATIALMETHODS;
+            return {
+              method
+            }
+          },
+          template: `
+            <div style="width: 100%; padding: 5px;">
+              <select ref="select" style="width: 100%"  :search="false" v-select2="'method'">
+                <option v-for="method in methods">{{method}}</option>
+              </select>
+            </div>`,
+          watch: {
+            'method': method => this.setSpatialMethod(method)
+          },
+          created() {
+            GUI.setCloseUserMessageBeforeSetContent(false);
+          },
+          beforeDestroy() {
+            GUI.setCloseUserMessageBeforeSetContent(true);
           }
-        },
-        template: `
-          <div style="width: 100%; padding: 5px;">
-            <select ref="select" style="width: 100%"  :search="false" v-select2="'method'">
-              <option v-for="method in methods">{{method}}</option>
-            </select>
-          </div>`,
-        watch: {
-          'method': method => this.setSpatialMethod(method)
-        },
-        created() {
-          GUI.setCloseUserMessageBeforeSetContent(false);
-        },
-        beforeDestroy() {
-          GUI.setCloseUserMessageBeforeSetContent(true);
         }
-      };
+      }
       break;
     case 'custom':
-      this.toggledTool = component;
+    default:
+      this.toggledTool = {title, component, showIcon, iconClass, userMessageType};
       break;
     // if we want to create a button (as info on hover)
   }
+
   switch (how) {
     case 'hover':
       this._createToolOnHoverButton();
@@ -291,13 +316,15 @@ proto._createToolOnHoverButton = function() {
 proto.showToggledTool = function(show=true) {
   if (show) {
     GUI.showUserMessage({
-      title: '',
-      type: 'tool',
+      title: this.toggledTool.title || '',
+      type: this.toggledTool.userMessageType ||'tool',
       size: 'small',
+      iconClass: this.toggledTool.iconClass,
+      showIcon: this.toggledTool.showIcon,
       closable: this._toolButton ? true : false,
       hooks: {
-        body: this.toggledTool
-      }
+        body: this.toggledTool.component
+      },
     });
   } else GUI.closeUserMessage();
 };
@@ -388,6 +415,17 @@ proto.toggle = function(toggled = !this._toggled) {
     this.showToggledTool(this._toggled);
   }
 
+  /**
+   * @since 3.9.0
+   */
+  if (this.controlItemsElement) {
+    if (toggled) {
+      GUI.getService('map').showMapControlsItems(this.controlItemsElement);
+    } else {
+      GUI.getService('map').hideMapControlsItems();
+    }
+  }
+
   this.dispatchEvent({ type: 'toggled', toggled });
 
 };