static/src/components/PageLisaMap.vue

<template>
  <div class="h-auto" id="id-prediction-map-container">

    <div class="grid grid-cols-1 2xl:grid-cols-5 lg:gap-1 lg:border-r ml-2 mt-2 md:ml-4 md:mr-4">

      <div class="lg:border-r lg:col-span-3">
        <div id="id-map-cont" class="">
          <div class="flex">
              <span class="flex portrait:hidden bg-slate-200">LISA+SamGIS demo</span>
            <span class="ml-2">
              <input type="checkbox" id="checkboxMapNavigationLocked" v-model="mapNavigationLocked" />
              <span class="ml-2">
                  <label class="text-red-600" for="checkboxMapNavigationLocked" v-if="mapNavigationLocked">locked map!</label>
                  <label class="text-blue-600" for="checkboxMapNavigationLocked" v-else>map unlocked</label>
              </span>
            </span>
            <details id="detail-prompt-examples-array" :open="detailIsOpenRef" class="ml-2">

              <summary><i>prompt examples</i></summary>
              <div class="grid grid-cols-1 md:grid-cols-3" id="prompt-examples-array">
                <div class="text-xs font-extralight flex bg-green-200">
                  <textarea
                      id="prompt-text-placeholder"
                      v-model="promptTextPlaceholderRef"
                      class="p-2 border-2 border-indigo-500/100 w-full"
                  />
                </div>
                <StringArray
                    :string-array="promptTextArray"
                    :string-prefix="promptTextPlaceholderRef"
                    @set-prompt="(stringPrompt: string) => promptTextRef = stringPrompt"
                />
              </div>

            </details>
          </div>

          <div class="flex w-full lg:w-2/3">
            <div class="md:pt-1 md:pb-1 md:mr-1 mr-2">
              <ButtonMapSendStringRequest
                  id="id-button-submit"
                  class="w-full h-8 mt-2 text-sm font-extralight min-w-[180px] max-w-[180px]"
                  :current-base-map-name="currentBaseMapNameRef"
                  :map="map"
                  :promptText="promptTextRef"
                  :response-message="responseMessageRef"
                  :send-m-l-request="sendMLStringRequest"
                  :waiting-string="waitingString"
              />
            </div>
            <textarea
                  id="prompt-text-llm-ref"
                  v-model="promptTextRef"
                  :placeholder=promptTextPlaceholderRef
                  rows="2"
                  class="w-full md:pt-1 md:pb-1 border-2 mt-2 mb-2 mr-2 border-indigo-500/100"
              ></textarea>
          </div>

          <div id="map" class="map-predictions"/>
        </div>
      </div>

      <div class="lg:col-span-2">
        <div class="lg:pl-2 lg:pr-2 lg:border-l lg:border-3" id="id-map-info">

          <h1>Map Info</h1>
          <div class="grid grid-cols-1 md:grid-cols-3">
            <StatsGrid :stats-array="[
              {statName: 'current Zoom', statValue: currentZoomRef},
              {statName: 'current map name/type', statValue: currentBaseMapNameRef}
            ]"/>
          </div>
          <h2 id="lisa-response-text">LISA response: <span class="text-lg text-blue-600">{{ responseMessageLisaRef }}</span></h2>
          <div v-if="responseMessageRef === waitingString"/>
          <h2 v-else-if="responseMessageRef || responseMessageRef == '-'" class="text-lg text-red-600">
            {{ responseMessageRef }}</h2>
          <div v-else>
            <div class="grid grid-cols-1 md:grid-cols-3">
              <StatsGrid :stats-array="[
                  {statName: 'request duration', statValue: `${durationRef.toFixed(2)}s`},
                  {statName: 'polygons number', statValue: numberOfPolygonsRef},
                  {statName: 'predicted masks number', statValue: numberOfPredictedMasksRef},
                ]"/>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  control as LeafletControl,
  Evented as LEvented,
  type LatLng,
  Map as LMap,
  map as LeafletMap,
  tileLayer,
  TileLayer as LTileLayer
} from 'leaflet'
import 'leaflet-providers'
import { onMounted, onUpdated, ref, type Ref } from 'vue'
// workaround because of dist/ content not included in @trincadev/driver.js tag release tarball
import { driver } from "../../node_modules/@trincadev/driver.js/src/driver"

import {
  currentBaseMapNameRef,
  currentMapBBoxRef,
  currentZoomRef,
  lisaPartialDriverSteps,
  durationRef,
  layerControlGroupLayersRef,
  mapNavigationLocked,
  maxZoom,
  minZoom,
  numberOfPolygonsRef,
  numberOfPredictedMasksRef,
  OpenStreetMap,
  prefix,
  promptPlaceHolder,
  promptTextArray,
  responseMessageRef,
  responseMessageLisaRef,
  Satellite,
  waitingString
} from './constants'
import {
  getCurrentBasemap,
  getExtentCurrentViewMapBBox,
  sendMLStringRequest,
  getQueryParams,
  getSelectedPointCoordinate,
  updateMapData,
  updateZoomBboxMap
} from '@/components/helpers'
import type { SourceTileType, ServiceTiles } from '@/components/types';
import StatsGrid from '@/components/StatsGrid.vue';
import StringArray from '@/components/StringArray.vue';
import ButtonMapSendStringRequest from '@/components/buttons/ButtonMapSendStringRequest.vue';

const promptTextRef: Ref<string> = ref("")
const promptTextPlaceholderRef: Ref<string> = ref(promptPlaceHolder)
const detailIsOpenRef: Ref<boolean> = ref(false)

const lisaDriverObj = driver({
  showProgress: true,
  steps: [
  {
    element: 'id-prediction-map-container', popover: {
      title: 'SamGIS with LISA...',
      description: 'A quick tour about functionalities of SamGIS with LISA!',
      onNextClick: () => {
        detailIsOpenRef.value = true
        lisaDriverObj.moveNext();
      }
    }
  },
  ...lisaPartialDriverSteps,
  {
    element: '#id-map-info', popover: {
      title: 'map info',
      description: 'Section about various map info',
      onNextClick: () => {
        detailIsOpenRef.value = false
        lisaDriverObj.moveNext();
      }
    }
  },
  {
    element: "#detail-prompt-examples-array", popover: {
      title: 'Detail: Array of Prompt Examples',
      description: 'Click here to expand the array of prompt examples (closed by default)'
    }
  },
]
});

let map: LMap

const props = defineProps<{
  mapBounds: Array<LatLng>,
  mapName: string,
  description: string
}>()

const getPopupContentPoint = (leafletEvent: LEvented, label: number): HTMLDivElement => {
  let popupContent: HTMLDivElement = document.createElement('div')
  let currentPointLayer: LatLng = getSelectedPointCoordinate(leafletEvent)

  popupContent.innerHTML = `<span>lat:${JSON.stringify(currentPointLayer.lat)}<br/>`
  popupContent.innerHTML += `lng:${JSON.stringify(currentPointLayer.lng)}<br/>`
  popupContent.innerHTML += `label:${label}, id:${leafletEvent.layer._leaflet_id}</span>`

  const popupDiv: HTMLDivElement = document.createElement('div')
  popupDiv.className = 'leaflet-popup-content-inner'
  popupDiv.appendChild(popupContent)

  return popupDiv
}

onMounted(async () => {
  const osmTile = tileLayer.provider(OpenStreetMap)
  const params = getQueryParams()
  let localVarSatellite: SourceTileType = params.source ? params.source : Satellite
  let localVarSatelliteOptions = params.options ? params.options : {}
  const satelliteTile = tileLayer.provider(localVarSatellite, localVarSatelliteOptions)
  let localVarTerrain: SourceTileType = "nextzen.terrarium"
  const terrainTile = new LTileLayer(
      "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png", {
        id: localVarTerrain,
        attribution: "<a href='https://nextzen.org'>nextzen</a>," +
            "<a href='https://registry.opendata.aws/terrain-tiles/'>Mapzen Terrain Tiles - AWS opendata registry</a>," +
            "<a href='https://github.com/tilezen/joerd/blob/master/docs/attribution.md'>Mapzen Source Attributions</a>."
      }
  )

  let baseMaps: ServiceTiles = {OpenStreetMap: osmTile}
  baseMaps[localVarSatellite] = satelliteTile
  baseMaps[localVarTerrain] = terrainTile
  currentBaseMapNameRef.value = OpenStreetMap

  map = LeafletMap('map', {
    layers: [osmTile],
    minZoom: minZoom,
    maxZoom: maxZoom
  })
  map.fitBounds(props.mapBounds)
  map.attributionControl.setPrefix(prefix)
  LeafletControl.scale({position: 'bottomleft', imperial: false, metric: true}).addTo(map)
  layerControlGroupLayersRef.value = LeafletControl.layers(baseMaps).addTo(map)
  updateZoomBboxMap(map)

  map.on('zoomend', (e: LEvented) => {
    updateZoomBboxMap(map)
  })

  map.on('mouseup', (e: LEvented) => {
    currentMapBBoxRef.value = getExtentCurrentViewMapBBox(map)
  })

  updateMapData(map, getPopupContentPoint, promptTextRef)
  map.on('baselayerchange', (e: LEvented) => {
    currentBaseMapNameRef.value = getCurrentBasemap(e.layer._url, baseMaps)
  })

  lisaDriverObj.drive();
})

onUpdated(() => {
  if (mapNavigationLocked.value) {
    map.setMaxZoom(currentZoomRef.value)
    map.setMinZoom(currentZoomRef.value)
    map.options.maxBoundsViscosity = 1.0
    map.setMaxBounds(map.getBounds())
  }
  if (!mapNavigationLocked.value) {
    map.setMaxZoom(maxZoom)
    map.setMinZoom(minZoom)
    map.options.maxBoundsViscosity = 0.0
    map.setMaxBounds([
      [90, 180],
      [-90, -180]
    ])
  }
})
</script>