map cell view improved

packages/web/src/celldata/MapCellView.svelte

@@ -1,7 +1,60 @@
 <script lang="ts">
-  import MapView from '../elements/MapView.svelte';
+  import _ from 'lodash';
+  import MapView, { findAllObjectPaths, findLatPaths, findLonPaths } from '../elements/MapView.svelte';
+  import SelectField from '../forms/SelectField.svelte';
 
   export let selection;
+
+  $: latitudeFields = _.uniq(_.flatten(selection.map(x => findLatPaths(x.rowData)))) as string[];
+  $: longitudeFields = _.uniq(_.flatten(selection.map(x => findLonPaths(x.rowData)))) as string[];
+  $: allFields = _.uniq(_.flatten(selection.map(x => findAllObjectPaths(x.rowData)))) as string[];
+
+  let latitudeField = '';
+  let longitudeField = '';
+
+  $: {
+    if (latitudeFields.length > 0 && !allFields.includes(latitudeField)) {
+      latitudeField = latitudeFields[0];
+    }
+  }
+  $: {
+    if (longitudeFields.length > 0 && !allFields.includes(longitudeField)) {
+      longitudeField = longitudeFields[0];
+    }
+  }
 </script>
 
-<MapView {selection} />
+<div class="container">
+  {#if allFields.length >= 2}
+    <div>
+      Lat:
+      <SelectField
+        isNative
+        options={allFields.map(x => ({ label: x, value: x }))}
+        value={latitudeField}
+        on:change={e => {
+          latitudeField = e.detail;
+        }}
+      />
+      Lon:
+      <SelectField
+        isNative
+        options={allFields.map(x => ({ label: x, value: x }))}
+        value={longitudeField}
+        on:change={e => {
+          longitudeField = e.detail;
+        }}
+      />
+    </div>
+  {/if}
+
+  <MapView {selection} {latitudeField} {longitudeField} />
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+</style>