Merge branch 'main' into depfu/update/importmap/@turf/destination-7.3.3

Author: digitaltom

app/assets/stylesheets/application.css

@@ -104,8 +104,13 @@ a:active, .link:active {
 
 .flex-center {
   display: flex;
-  justify-content: center; /* Vertically centers the items */
-  align-items: center;
+  justify-content: center; /* Horizontally centers the items */
+  align-items: center; /* Vertically centers the items */
+}
+
+.flex-vcenter {
+  display: flex;
+  align-items: center; /* Vertically centers the items */
 }
 
 .flex-no-wrap {

app/assets/stylesheets/feature.css

@@ -19,6 +19,7 @@
   text-overflow: ellipsis;
   margin-top: 0.1rem;
   line-height: 1.5;
+  font-weight: 400;
 }
 
 @media (width <= 574px) {
@@ -102,6 +103,10 @@
   height: auto;
 }
 
+#feature-details-body .icon {
+  max-height: 1rem;
+}
+
 #feature-edit-raw textarea {
   width: 100%;
   height: 100%;

app/javascript/controllers/feature/edit_controller.js

@@ -2,7 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import { mapChannel } from 'channels/map_channel'
 import { featureIcon, featureImage, uploadImageToFeature, confirmImageLocation } from 'maplibre/feature'
 import { handleDelete, draw } from 'maplibre/edit'
-import { featureColor, featureOutlineColor } from 'maplibre/styles'
+import { featureColor, featureOutlineColor } from 'maplibre/styles/styles'
 import { status } from 'helpers/status'
 import * as functions from 'helpers/functions'
 import * as dom from 'helpers/dom'

app/javascript/controllers/feature/modal_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { mapChannel } from 'channels/map_channel'
-import { defaultLineWidth, featureColor, featureOutlineColor } from 'maplibre/styles'
+import { defaultLineWidth, featureColor, featureOutlineColor } from 'maplibre/styles/styles'
 import { AnimateLineAnimation, AnimatePolygonAnimation, animateViewFromProperties } from 'maplibre/animations'
 import { status } from 'helpers/status'
 import { showFeatureDetails, highlightedFeatureId } from 'maplibre/feature'

app/javascript/controllers/map/layers_controller.js

@@ -5,8 +5,8 @@ import { initLayersModal } from 'maplibre/controls/shared'
 import { uploadImageToFeature, confirmImageLocation } from 'maplibre/feature'
 import { status } from 'helpers/status'
 import * as functions from 'helpers/functions'
-import { initializeOverpassLayers } from 'maplibre/overpass/overpass'
-import { queries } from 'maplibre/overpass/queries'
+import { initializeOverpassLayers } from 'maplibre/layers/overpass'
+import { queries } from 'maplibre/layers/queries'
 import { flyToFeature } from 'maplibre/animations'
 import { layers, initializeLayerStyles, initializeLayerSources, loadLayerData, loadAllLayerData } from 'maplibre/layers/layers'
 import { renderGeoJSONLayer } from 'maplibre/layers/geojson'

app/javascript/maplibre/edit.js

@@ -1,5 +1,5 @@
 import { map, destroyFeature, addFeature, mapProperties } from 'maplibre/map'
-import { editStyles } from 'maplibre/edit_styles'
+import { editStyles } from 'maplibre/styles/edit_styles'
 import { highlightFeature } from 'maplibre/feature'
 import { getRouteUpdate, getRouteElevation } from 'maplibre/routing/openrouteservice'
 import { initDirections, resetDirections } from 'maplibre/routing/osrm'

app/javascript/maplibre/feature.js

@@ -1,14 +1,12 @@
-import { map, mapProperties } from 'maplibre/map'
+import { map } from 'maplibre/map'
 import * as f from 'helpers/functions'
 import * as dom from 'helpers/dom'
 import { marked } from 'marked'
-import { defaultLineWidth } from 'maplibre/styles'
 import { showElevationChart } from 'maplibre/feature/elevation'
 import { length } from "@turf/length"
 import { area } from "@turf/area"
-import { buffer } from "@turf/buffer"
 import { lineString, multiLineString, polygon, multiPolygon } from "@turf/helpers"
-import { layers, getFeature, getFeatures, getFeatureSource } from "maplibre/layers/layers"
+import { layers, getFeature, getFeatureSource } from "maplibre/layers/layers"
 
 window.marked = marked
 
@@ -173,7 +171,12 @@ export async function showFeatureDetails (feature) {
 
   f.e('.feature-symbol', e => { e.innerHTML = featureIcon(feature) })
   f.e('.feature-image', e => { e.innerHTML = featureImage(feature) })
-  document.querySelector('#feature-title').innerHTML = featureTitle(feature)
+  
+  const title = featureTitle(feature)
+  const titleElement = document.querySelector('#feature-title')
+  titleElement.innerHTML = title
+  titleElement.style.fontSize = titleElement.textContent.length > 24 ? '1rem' : null;
+
   document.querySelector('#feature-size').innerHTML = featureMeta(feature)
   document.querySelector('#feature-vertexes').innerHTML = featureVertexes(feature)
   if (feature.geometry.type === 'Point') {
@@ -188,19 +191,44 @@ export async function showFeatureDetails (feature) {
     link.href = link.href.replace(/feature\/.*/, 'feature/' + feature.id + '.gpx')
     if (feature.properties.title) { link.href += '/' + encodeURIComponent(feature.properties.title.replace(/[\s\/]+/g, "_")) }
   }
+
+  document.querySelector('#feature-details-description').innerHTML = 'Loading description...'
+  featureDescription(feature).then(desc => {
+    document.querySelector('#feature-details-description').innerHTML = desc
+  })
+
+}
+
+async function featureDescription (feature) {
   marked.use({ gfm: true, breaks: true })
-  let desc = marked(feature?.properties?.desc || '')
+  let desc = ''
   // show link target if onclick is link
-  if (feature?.properties?.onclick === 'link' && feature?.properties?.['onclick-target']) { 
+  if (feature?.properties?.onclick === 'link' && feature?.properties?.['onclick-target']) {
     desc = `<p><i class="bi bi-box-arrow-up-right"></i> ${feature.properties['onclick-target']}</p>`
-  } else if (feature?.properties?.onclick === 'feature' && feature?.properties?.['onclick-target']) { 
-  // show feature target if onclick is feature
+  } else if (feature?.properties?.onclick === 'feature' && feature?.properties?.['onclick-target']) {
+    // show feature target if onclick is feature
     desc = `<p><i class="bi bi-geo-alt-fill"></i> ${feature.properties['onclick-target']}</p>`
+  } else if (feature?.properties?.wikipediaId) {
+    const page = encodeURIComponent(feature.properties.title)
+    const api = `https://en.wikipedia.org/api/rest_v1/page/summary/${page}`
+    const url = `https://en.wikipedia.org/wiki/${page}`
+
+    const data = await fetch(api).then(r => r.json())
+    if (data.thumbnail?.source) {
+      desc += `<p><a target="_blank" href="${url}">` + 
+              `<img class="w-100" src="${data.thumbnail.source}"></a></p>`
+    }
+    desc += `<p>${data.extract}</p>`
+    desc += `<p>Read the full <img src="/icons/wikipedia.png" class="me-1 ms-1 icon"/><a target="_blank" href="${url}">Wikipedia article</a></p>`
+
+  } else {
+    desc = f.sanitizeMarkdown(marked(feature?.properties?.desc || ''))
   }
-  desc = f.sanitizeMarkdown(desc)
-  document.querySelector('#feature-details-description').innerHTML = desc
+  return desc
 }
 
+
+
 // set title image according to feature type
 export function featureIcon (feature) {
   let image = ''
@@ -277,32 +305,6 @@ export function highlightFeature (feature, sticky = false, source) {
   }
 }
 
-export function renderExtrusionLines () {
-  // Disable extrusionlines on 3D terrain, it does not work
-  if (mapProperties.terrain) { return [] }
-
-  let extrusionLines = getFeatures('geojson').filter(feature => (
-    feature.geometry.type === 'LineString' &&
-      feature.properties['fill-extrusion-height'] &&
-      feature.geometry.coordinates.length !== 1 // don't break line animation
-  ))
-
-  extrusionLines = extrusionLines.map(feature => {
-    const width = feature.properties['fill-extrusion-width'] || feature.properties['stroke-width'] || defaultLineWidth
-    const extrusionLine = buffer(feature, width, { units: 'meters' })
-    // clone properties hash, else we're writing into the original feature's properties
-    extrusionLine.properties = { ...feature.properties }
-    if (!extrusionLine.properties['fill-extrusion-color'] && feature.properties.stroke) {
-      extrusionLine.properties['fill-extrusion-color'] = feature.properties.stroke
-    }
-    extrusionLine.properties['stroke-width'] = 0
-    extrusionLine.properties['stroke-opacity'] = 0
-    extrusionLine.properties['fill-opacity'] = 0
-    return extrusionLine
-  })
-  return extrusionLines
-}
-
 export async function uploadImage(image) {
   const formData = new FormData() // send using multipart/form-data
   formData.append('image', image)

app/javascript/maplibre/feature/elevation.js

@@ -1,4 +1,4 @@
-import { featureColor } from 'maplibre/styles'
+import { featureColor } from 'maplibre/styles/styles'
 import { map } from 'maplibre/map'
 import { point } from "@turf/helpers"
 import { distance } from "@turf/distance"

app/javascript/maplibre/layers/geojson.js

@@ -1,12 +1,13 @@
-import { map } from 'maplibre/map'
-import { initializeViewStyles, initializeClusterStyles, styles, featureColor, labelFont, setSource } from 'maplibre/styles'
-import { layers } from 'maplibre/layers/layers'
+import { map, mapProperties } from 'maplibre/map'
+import { initializeViewStyles, initializeClusterStyles, styles, featureColor, labelFont, setSource } from 'maplibre/styles/styles'
+import { layers, getFeatures } from 'maplibre/layers/layers'
 import { draw, select } from 'maplibre/edit'
 import { getFeature } from 'maplibre/layers/layers'
-import { renderExtrusionLines } from 'maplibre/feature'
 import { lineString } from "@turf/helpers"
 import { length } from "@turf/length"
 import { along } from "@turf/along"
+import { buffer } from "@turf/buffer"
+import { defaultLineWidth } from 'maplibre/styles/styles'
 
 export function initializeGeoJSONLayers(id = null) {
   // console.log('Initializing geojson layers')
@@ -193,4 +194,30 @@ export function initializeKmMarkerStyles(id) {
     style = setSource (style, 'km-marker-source-' + id)
     map.addLayer(style) 
   })
+}
+
+function renderExtrusionLines() {
+  // Disable extrusionlines on 3D terrain, it does not work
+  if (mapProperties.terrain) { return [] }
+
+  let extrusionLines = getFeatures('geojson').filter(feature => (
+    feature.geometry.type === 'LineString' &&
+    feature.properties['fill-extrusion-height'] &&
+    feature.geometry.coordinates.length !== 1 // don't break line animation
+  ))
+
+  extrusionLines = extrusionLines.map(feature => {
+    const width = feature.properties['fill-extrusion-width'] || feature.properties['stroke-width'] || defaultLineWidth
+    const extrusionLine = buffer(feature, width, { units: 'meters' })
+    // clone properties hash, else we're writing into the original feature's properties
+    extrusionLine.properties = { ...feature.properties }
+    if (!extrusionLine.properties['fill-extrusion-color'] && feature.properties.stroke) {
+      extrusionLine.properties['fill-extrusion-color'] = feature.properties.stroke
+    }
+    extrusionLine.properties['stroke-width'] = 0
+    extrusionLine.properties['stroke-opacity'] = 0
+    extrusionLine.properties['fill-opacity'] = 0
+    return extrusionLine
+  })
+  return extrusionLines
 }

app/javascript/maplibre/layers/layers.js

@@ -1,5 +1,5 @@
 import { initializeWikipediaLayers, loadWikipediaLayer } from 'maplibre/layers/wikipedia'
-import { initializeOverpassLayers, loadOverpassLayer } from 'maplibre/overpass/overpass'
+import { initializeOverpassLayers, loadOverpassLayer } from 'maplibre/layers/overpass'
 import { addGeoJSONSource, map, sortLayers } from 'maplibre/map'
 import { initializeGeoJSONLayers } from 'maplibre/layers/geojson'
 import * as functions from 'helpers/functions'