DON'T MERGE: load attribution from style

adhocracy4/maps_react/static/a4maps_react/Map.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useImperativeHandle } from 'react'
+import React, { useRef, useState, useImperativeHandle } from 'react'
 import { MapContainer, GeoJSON } from 'react-leaflet'
 import MaplibreGlLayer from './MaplibreGlLayer'
 
@@ -10,9 +10,10 @@ const polygonStyle = {
 }
 
 const Map = React.forwardRef(function Map (
-  { attribution, baseUrl, polygon, omtToken, children, ...rest }, ref
+  { baseUrl, polygon, omtToken, children, ...rest }, ref
 ) {
   const map = useRef()
+  const [attribution, setAttribution] = useState(rest.attribution)
   // forwarding our map ref
   useImperativeHandle(ref, () => map.current)
   const refCallback = (polygon) => {
@@ -34,7 +35,7 @@ const Map = React.forwardRef(function Map (
       ref={map}
     >
       {polygon && <GeoJSON style={polygonStyle} data={polygon} ref={refCallback} />}
-      <MaplibreGlLayer attribution={attribution} baseUrl={baseUrl} omtToken={omtToken} />
+      <MaplibreGlLayer attribution={attribution} setAttribution={setAttribution} baseUrl={baseUrl} omtToken={omtToken} />
       {children}
     </MapContainer>
   )

adhocracy4/maps_react/static/a4maps_react/MaplibreGlLayer.js

@@ -8,6 +8,7 @@ import {
 const createMaplibreGlLayer = (props, context) => {
   const instance = L.maplibreGL({
     style: props.baseUrl,
+    attribution: props.attribution,
     transformRequest: function (url, resourceType) {
       if (resourceType === 'Tile' && url.indexOf('https://') === 0) {
         return {
@@ -31,6 +32,35 @@ const updateMaplibreGlLayer = (instance, props, prevProps) => {
   if (attribution != null && attribution !== prevProps.attribution) {
     instance.options.attribution = attribution
   }
+  // load attribution from style
+  if (!attribution) {
+    const map = instance.getMaplibreMap()
+    if (map == null) {
+      console.warn("a4: couldn't load maplibreMap to set attribution")
+      return
+    }
+    const loadAttribution = () => {
+      const sources = map.getStyle().sources
+      const keys = Object.keys(sources)
+      const noAttribution = keys.every((key, index) => {
+        if ('attribution' in sources[key]) {
+          props.setAttribution(sources[key].attribution)
+          return false
+        }
+        return true
+      })
+      if (noAttribution) {
+        console.warn("couldn't find map attribution in style")
+      }
+    }
+    if (map.isStyleLoaded()) {
+      loadAttribution()
+    } else {
+      map.once('styledata', function () {
+        loadAttribution()
+      })
+    }
+  }
 }
 
 const MaplibreGlLayer = createTileLayerComponent(createMaplibreGlLayer, updateMaplibreGlLayer)