link features in layer list to fly to their location

app/assets/stylesheets/application.css

@@ -65,6 +65,7 @@ body {
 }
 
 .map-modal {
+  display: none;
   position: absolute;
   overflow-y: auto;
   max-height: calc(100vh - 4em);
@@ -82,7 +83,6 @@ body {
   border-width: 1px;
   border-style: solid;
   border-color: #000;
-  display: none;
 }
 
 .layer-preview {

app/assets/stylesheets/map.css

@@ -1,3 +1,15 @@
+.layer-feature-item a {
+  color: black;
+}
+
+.layer-feature-item a:hover {
+  color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); /* stylelint-disable-line */
+}
+
+.layer-feature-item i {
+  margin-left: 0.5em;
+}
+
 .feature-popup {
   width: 20em;
   max-width: 35em;

app/javascript/controllers/maplibre_controller.js

@@ -1,10 +1,11 @@
 import { Controller } from '@hotwired/stimulus'
 import { mapChannel } from 'channels/map_channel'
 import { map, mapProperties, setBackgroundMapLayer, geojsonData, upsert } from 'maplibre/map'
-import { initLayersModal } from 'maplibre/controls'
+import { initLayersModal, resetControls } from 'maplibre/controls'
 
 // eslint expects variables to get imported, but we load the full lib in header
 const toGeoJSON = window.toGeoJSON
+const turf = window.turf
 
 export default class extends Controller {
   update_feature () {
@@ -81,4 +82,19 @@ export default class extends Controller {
       }
     }
   }
+
+  flyto () {
+    const id = this.element.getAttribute('data-feature-id')
+    const feature = geojsonData.features.find(f => f.id === id)
+    // Calculate the centroid
+    const centroid = turf.centroid(feature)
+    console.log('Fly to: ' + feature.id + ' ' + centroid.geometry.coordinates)
+    resetControls()
+    map.flyTo({
+      center: centroid.geometry.coordinates,
+      speed: 0.8,
+      curve: 1,
+      essential: true
+    })
+  }
 }

app/javascript/maplibre/controls.js

@@ -119,8 +119,20 @@ export function initLayersModal () {
     e.innerHTML = ''
     geojsonData.features.forEach(feature => {
       const listItem = document.createElement('li')
+      listItem.classList.add('layer-feature-item')
       listItem.textContent = `${feature.geometry.type}: ` +
-          `${feature.title ? feature.title : feature.id}`
+          (feature.properties.name || feature.properties.title || feature.id)
+      const link = document.createElement('a')
+      link.setAttribute('href', '#')
+      link.setAttribute('onclick', 'return false;')
+      listItem.appendChild(link)
+      const icon = document.createElement('i')
+      icon.classList.add('bi')
+      icon.classList.add('bi-arrow-right-circle')
+      icon.setAttribute('data-feature-id', feature.id)
+      icon.setAttribute('data-controller', 'maplibre')
+      icon.setAttribute('data-action', 'click->maplibre#flyto')
+      link.appendChild(icon)
       e.appendChild(listItem)
     })
   })

app/javascript/maplibre/styles.js

@@ -78,7 +78,10 @@ export const styles = {
     paint: {
       'fill-extrusion-color': ['coalesce',
         ['get', 'fill-extrusion-color'],
-        ['get', 'user_fill-extrusion-color'], 'rgb(10, 135, 10)'],
+        ['get', 'user_fill-extrusion-color'],
+        ['get', 'fill'],
+        ['get', 'user_fill'],
+        'rgb(10, 135, 10)'],
       'fill-extrusion-height': ['coalesce',
         ['get', 'fill-extrusion-height'],
         ['get', 'user_fill-extrusion-height']],

app/views/maps/_layers_modal_maplibre.haml

@@ -5,7 +5,7 @@
     %h4.layer-name Default Layer
     %input#fileInput{ type: "file" }
     %button{ data: { action: "click->maplibre#upload" } }
-      Import
+      Import gpx/kml
     %ul.layer-elements