Add mobile mode

configure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "configure",
-  "version": "4.1.4-20251105",
+  "version": "4.1.6-20251107",
   "homepage": "./configure/build",
   "private": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmgis",
-  "version": "4.1.4-20251105",
+  "version": "4.1.6-20251107",
   "description": "A web-based mapping and localization solution for science operation on planetary missions.",
   "homepage": "build",
   "repository": {

src/essence/Ancillary/Attributions.js

@@ -62,7 +62,7 @@ var Attributions = {
                 $('#mapToolBar').css('height', '40px')
             }
             // Set compass to base position when no attributions
-            $('#mmgis-map-compass').css('bottom', '38px')
+            $('#mmgis-map-compass').css('bottom', L_.UserInterface_?.isMobile === true ? '78px' : '38px')
             return
         }
 

src/essence/Ancillary/Coordinates.js

@@ -4,14 +4,17 @@ import * as d3 from 'd3'
 import F_ from '../Basics/Formulae_/Formulae_'
 import Map_ from '../Basics/Map_/Map_'
 import L_ from '../Basics/Layers_/Layers_'
+import TimeUI from './TimeUI'
 import Dropy from '../../external/Dropy/dropy'
-import UserInterface from '../Basics/UserInterface_/UserInterface_'
+import * as _UserInterface_ from '../Basics/UserInterface_/UserInterface_'
 import calls from '../../pre/calls'
 
 import tippy from 'tippy.js'
 
 import './Coordinates.css'
 
+const UserInterface = await _UserInterface_.default()
+
 // prettier-ignore
 const markup = [
     "<div class='mouseLngLat'>",
@@ -101,24 +104,57 @@ const Coordinates = {
             coordENMultiplier: [1, 1],
         },
     },
+    initialize: function () {
+        if (UserInterface.isMobile === true) {
+            this.width = 'full'
+            this.height = 100
+        }
+    },
+    make: function () {
+        this.MMWebGISInterface = new interfaceWithMMWebGIS()
+    },
+    destroy: function () {
+        this.MMWebGISInterface.separateFromMMWebGIS()
+    },
     init: function () {
         d3.select('#CoordinatesDiv').remove()
-        d3.select('body')
-            .append('div')
-            .attr('id', 'CoordinatesDiv')
-            .html(markup)
-
-        tippy('#pickLngLat', {
-            content: 'Pick Coordinates',
-            placement: 'top',
-            theme: 'blue',
-        })
-        tippy('#toggleTimeUI', {
-            content: 'Time',
-            placement: 'top',
-            theme: 'blue',
-            offset: [0, 20],
-        })
+
+        if (!UserInterface.isMobile) {
+            d3.select('body')
+                .append('div')
+                .attr('id', 'CoordinatesDiv')
+                .html(markup)
+        } else {
+            var additionalDiv = [
+                "<div class='left'>",
+                    "<div id='coordUITitle'>Coordinates</div>",
+                "</div>",
+            ].join('\n');
+
+            d3.select('#tools')
+                .append('div')
+                .attr('id', 'coordUIHeader')
+                .html(additionalDiv)
+
+            d3.select('#tools')
+                .append('div')
+                .attr('id', 'CoordinatesDiv')
+                .html(markup)
+        }
+
+        if (!UserInterface.isMobile) {
+            tippy('#pickLngLat', {
+                content: 'Pick Coordinates',
+                placement: 'top',
+                theme: 'blue',
+            })
+            tippy('#toggleTimeUI', {
+                content: 'Time',
+                placement: 'top',
+                theme: 'blue',
+                offset: [0, 20],
+            })
+        }
 
         if (
             !(
@@ -245,11 +281,15 @@ const Coordinates = {
             if (L_.configData.coordinates.coordsite)
                 Coordinates.states.site.available = true
         }
-        // Remove all unavailable state
-        Object.keys(Coordinates.states).forEach((s) => {
-            if (!Coordinates.states[s].available) delete Coordinates.states[s]
-            else delete Coordinates.states[s].available
-        })
+
+        // If the available key does not exist, it means they were already deleted
+        if (Object.keys(Coordinates.states).length === Object.values(Coordinates.states).filter(i => i.available != undefined).length) {
+            // Remove all unavailable state
+            Object.keys(Coordinates.states).forEach((s) => {
+                if (!Coordinates.states[s].available) delete Coordinates.states[s]
+                else delete Coordinates.states[s].available
+            })
+        }
         Coordinates.stateIndices = Object.keys(Coordinates.states)
 
         // Set main type and, if invalid main type, default back to ll
@@ -280,7 +320,8 @@ const Coordinates = {
             (L_.FUTURES.live === true ||
                 (L_.FUTURES.live == null &&
                     (L_.configData.time.initiallyOpen === true ||
-                        L_.configData.time.liveByDefault === true)))
+                        L_.configData.time.liveByDefault === true))) &&
+            !UserInterface.isMobile
         ) {
             toggleTimeUI()
         }
@@ -824,4 +865,47 @@ function toggleTimeUI() {
     })
 }
 
+
+function interfaceWithMMWebGIS() {
+    this.separateFromMMWebGIS = function () {
+        separateFromMMWebGIS()
+    }
+
+    //MMWebGIS should always have a div with id 'tools'
+    var tools = d3.select('#tools')
+    //Clear it
+    tools.selectAll('*').remove()
+
+    //Add the markup to tools or do it manually
+    //tools.html(markup)
+
+    Coordinates.init()
+
+    if (UserInterface.isMobile) {
+        d3.select('#CoordinatesDiv > #toggleTimeUI').remove()
+
+        const mapRect = document.getElementById('map').getBoundingClientRect()
+
+        // Find center of map
+        const wOffset = mapRect.width / 2
+        const hOffset = mapRect.height / 2
+
+        //Find coordinates at map center and at another point one pixel below the center
+        const centerlatlong = Map_.map.containerPointToLatLng([
+            wOffset,
+            hOffset,
+        ])
+
+        // Set the coordinates to the center of the map
+        $('#mouseLngLat').text(`${centerlatlong.lng}, ${centerlatlong.lat}`)
+    }
+
+    function separateFromMMWebGIS() {
+        let tools = d3.select('#tools')
+
+        //Clear it
+        tools.selectAll('*').remove()
+    }
+}
+
 export default Coordinates