refactor: update data attribution

Author: airslice

web/src/classic/components/molecules/Visualizer/Widget/DataAttribution/ContentModal.tsx

@@ -36,7 +36,11 @@ const ContentModal: FC<ContentModalProps> = ({ visible, credits, publishedTheme,
               {credits?.map((credit, index) => (
                 <ListItem key={index}>
                   <ListMarker>•</ListMarker>
-                  {credit.creditUrl ? (
+                  {credit.builtinHtml ? (
+                    <CreditItem>
+                      <CreditText dangerouslySetInnerHTML={{ __html: credit.builtinHtml }} />
+                    </CreditItem>
+                  ) : credit.creditUrl ? (
                     <CreditItemLink
                       target="_blank"
                       href={credit.creditUrl}

web/src/classic/components/molecules/Visualizer/Widget/DataAttribution/index.tsx

@@ -1,5 +1,5 @@
 import { isEqual } from "lodash-es";
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 
 import { useT } from "@reearth/services/i18n";
 import { styled, usePublishTheme } from "@reearth/services/theme";
@@ -8,7 +8,7 @@ import { ComponentProps as WidgetProps } from "..";
 import { Credits } from "../../Engine/ref";
 
 import ContentModal from "./ContentModal";
-import useCredits from "./useCredits";
+import useCredits, { ProcessedCredit } from "./useCredits";
 
 export type Props = WidgetProps<DataAttributionWidgetProperty>;
 
@@ -21,13 +21,39 @@ export type DataAttributionWidgetProperty = {
   }[];
 };
 
-const DataAttribution: FC<Props> = ({ onGetCredits, sceneProperty, widget }) => {
+const DataAttribution: FC<Props> = ({
+  onGetCredits,
+  sceneProperty,
+  widget,
+  hasVisibleReearthBuildingsLayers,
+}) => {
   const t = useT();
   const [visible, setVisible] = useState(false);
   const [credits, setCredits] = useState<Credits>();
 
   const publishedTheme = usePublishTheme(sceneProperty?.theme);
 
+  // Check for visible reearth-buildings tileset layers
+  // This effect will run whenever hasVisibleReearthBuildingsLayers changes (layer added/removed/visibility changed)
+  useEffect(() => {
+    if (hasVisibleReearthBuildingsLayers) {
+      console.log(
+        "[Re:Earth] Visible reearth-buildings tileset layers detected",
+        hasVisibleReearthBuildingsLayers,
+      );
+    }
+  }, [hasVisibleReearthBuildingsLayers]);
+
+  const layerCredits: ProcessedCredit[] = useMemo(() => {
+    if (!hasVisibleReearthBuildingsLayers) return [];
+    return [
+      {
+        builtinHtml:
+          '<a href="https://buildings.reearth.land/" target="_blank" rel="noopener">Re:Earth Buildings</a> — Buildings © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap contributors</a>, <a href="https://overturemaps.org/" target="_blank" rel="noopener">Overture Maps Foundation</a> (ODbL)<br/> Terrain by <a href="https://terrain.reearth.land/" target="_blank" rel="noopener">Re:Earth Terrain</a> (Mapterhorn / EGM2008)',
+      },
+    ];
+  }, [hasVisibleReearthBuildingsLayers]);
+
   useEffect(() => {
     let intervalId: NodeJS.Timeout | null = null;
 
@@ -48,7 +74,14 @@ const DataAttribution: FC<Props> = ({ onGetCredits, sceneProperty, widget }) =>
     };
   }, [onGetCredits, credits]);
 
-  const { cesiumCredit, otherCredits } = useCredits({ credits, property: widget.property });
+  const { cesiumCredit, otherCredits, googleCredit } = useCredits({
+    credits,
+    property: widget.property,
+  });
+
+  const modalCredits = useMemo(() => {
+    return [...(otherCredits ?? []), ...layerCredits];
+  }, [layerCredits, otherCredits]);
 
   return (
     <Wrapper>
@@ -57,11 +90,20 @@ const DataAttribution: FC<Props> = ({ onGetCredits, sceneProperty, widget }) =>
           <img src={cesiumCredit.logo} title={cesiumCredit.description} />
         </CesiumLink>
       )}
+      {googleCredit && (
+        <GoogleLink target="_blank" rel="noreferrer" aria-label={googleCredit.description}>
+          <img
+            src={googleCredit.logo}
+            alt={googleCredit.description}
+            title={googleCredit.description}
+          />
+        </GoogleLink>
+      )}
       <DataLink onClick={() => setVisible(true)}>{t("Data Attribution")}</DataLink>
       <ContentModal
         publishedTheme={publishedTheme}
         visible={visible}
-        credits={otherCredits}
+        credits={modalCredits}
         onClose={() => setVisible(false)}
       />
     </Wrapper>
@@ -87,4 +129,8 @@ const DataLink = styled("div")(() => ({
   padding: 4,
 }));
 
+const GoogleLink = styled("a")(() => ({
+  height: 18,
+}));
+
 export default DataAttribution;

web/src/classic/components/molecules/Visualizer/Widget/DataAttribution/useCredits.ts

@@ -13,11 +13,13 @@ export type ProcessedCredit = {
   logo?: string;
   description?: string;
   creditUrl?: string;
+  builtinHtml?: string; // For hardcoded credits like Re:Earth Buildings
 };
 
 export default ({ credits, property }: Props) => {
   const [cesiumCredit, setCesiumCredit] = useState<ProcessedCredit | undefined>(undefined);
   const [otherCredits, setOtherCredits] = useState<ProcessedCredit[] | undefined>(undefined);
+  const [googleCredit, setGoogleCredit] = useState<ProcessedCredit | undefined>(undefined);
 
   useEffect(() => {
     if (credits) {
@@ -28,6 +30,14 @@ export default ({ credits, property }: Props) => {
         .map(processCredit)
         .filter(Boolean) as ProcessedCredit[];
       const screenCredits = credits.screen.map(processCredit).filter(Boolean) as ProcessedCredit[];
+      let googleCredit = screenCredits.find(e => e.logo?.includes("google"));
+      if (!googleCredit && credits.lightbox.some(c => c.html?.includes("Google"))) {
+        googleCredit = {
+          logo: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAASCAYAAACghwvPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAs1JREFUeNrsWYGRhCAMtARLsARLoARLoARLsANKsARLoARKsARK4M+fcLOXCxHP+fPm/5lh5tQAIZtkA9c00FJK5taX9Ny2d0Nzcbvp0N+633rzW9ttcy7tt/liHU1W5MQc09Z3ZFqSs1eCEDbv35ShbwN54W8BIjeryMwk4y/ZnGbot3vHzwMRs7MJ6S9dAUTmhFVS7KCRukq5dkem2+SOAEFj+gNAJClFQfS/HYjcxhfGthDGCQAdBCMtgpwpkDF67ULvnAQEpc6VjRl39htgTMfmSqCDV9Z52CfoOJEOWReHjkfPEbPQ93d4YQreIXVHIASF2C2AFZmhsA0AQlTm8xwIMBwaR+UAmMvmihC+5fE9AsHW8cxZjBBpgWQirgFcvNLvcF9nBwjNKGPB6Bgh+BxBaQRxZSkhZC9l4EhArPCtZam2xAFo4KyDIU++8yST62kfFjmTGfmJZ9k+sejpWIRYNTWRgthnwStmIV1l41n4PQrpKoEhHiKElZtPQDBSNULIB4mzmIENyEYEr5CaFtj7wub6Bl9YL0eTA/vliLhXp4fIGjxwAiA0wpsqI25SSNgUgDCls45G2oKBF4m8mZGtkJpWAQi/o7/EqTFHhHkijvJBCL1Ri4gkRMSkRER/MiJWSpXZm9sDQHSYIgtAeM47sM/aiJgFgNzDOHagW8mAHS02MHJyNGbkaY3kPeZoxhEDbL7EEcglppIjkFeMVK2UgAAO6CqAaEuHPm4fgSMsRBLOEx4yAfP4qiuOA1WTJmdOVE1GkQ+1QOxFDnOmhVVnvlA1zehEharJS9HYACHHmks/MjInSekcIeVGz3M5gbGwuQLK80s/4eyxl2I9eq0ChIfo5/pH8HDHyuJJPCeUzxG+5iD67isMK4DjeL3/oZem7z2J/+BGZiXfp0+46/orQGgcEc7cg/0D8fofP1X5/sN0P/X/xZcAAwB8nuN904Y57wAAAABJRU5ErkJggg==",
+          description: "Google Maps",
+        };
+      }
+      setGoogleCredit(googleCredit);
       const widgetCredits =
         property?.default?.map(credit => ({
           logo: credit.logo,
@@ -42,6 +52,7 @@ export default ({ credits, property }: Props) => {
   return {
     cesiumCredit,
     otherCredits,
+    googleCredit,
   };
 };
 

web/src/classic/components/molecules/Visualizer/Widget/index.tsx

@@ -31,6 +31,7 @@ export type Props<PP = any, SP = any> = {
   onExtend?: (id: string, extended: boolean | undefined) => void;
   onVisibilityChange?: (widgetId: string, visible: boolean) => void;
   onGetCredits: () => Credits | undefined;
+  hasVisibleReearthBuildingsLayers?: boolean;
 } & PluginCommonProps;
 
 export type ComponentProps<PP = any, SP = any> = Omit<Props<PP, SP>, "widget"> & {

web/src/classic/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx

@@ -38,6 +38,7 @@ type Props = {
   viewport?: Viewport;
   onWidgetAlignAreaSelect?: (widgetArea?: WidgetAreaState) => void;
   onGetCredits: () => Credits | undefined;
+  hasVisibleReearthBuildingsLayers?: boolean;
   // note that layoutConstraint will be always undefined in published pages
   layoutConstraint?: { [w in string]: WidgetLayoutConstraint };
 } & PluginCommonProps;

web/src/classic/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx

@@ -29,6 +29,7 @@ export type Props = {
   invisibleWidgetIDs?: string[];
   onWidgetAlignAreaSelect?: (widgetArea?: WidgetAreaState) => void;
   onGetCredits: () => Credits | undefined;
+  hasVisibleReearthBuildingsLayers?: boolean;
 } & PluginCommonProps;
 
 export default function MobileZone({

web/src/classic/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx

@@ -25,6 +25,7 @@ export type Props = {
   overrideSceneProperty?: (pluginId: string, property: any) => void;
   onWidgetAlignAreaSelect?: (widgetAreaState?: WidgetAreaState) => void;
   onGetCredits: () => Credits | undefined;
+  hasVisibleReearthBuildingsLayers?: boolean;
 } & PluginCommonProps;
 
 export default function Zone({

web/src/classic/components/molecules/Visualizer/WidgetAlignSystem/index.tsx

@@ -54,6 +54,7 @@ export type Props = {
   onWidgetAlignAreaSelect?: (widgetArea?: WidgetAreaState) => void;
   onVisibilityChange?: (widgetId: string, visible: boolean) => void;
   onGetCredits: () => Credits | undefined;
+  hasVisibleReearthBuildingsLayers?: boolean;
 } & PluginCommonProps;
 
 const WidgetAlignSystem: React.FC<Props> = ({

web/src/classic/components/molecules/Visualizer/hooks.ts

@@ -336,6 +336,21 @@ export default ({
     return engineRef.current?.getCredits();
   }, [engineRef]);
 
+  const hasVisibleReearthBuildingsLayers = useMemo(() => {
+    const flattenedLayers = layers?.flattenLayersRaw;
+    if (!flattenedLayers) return false;
+
+    return flattenedLayers.some(layer => {
+      // Check if layer is visible, type is tileset, and has reearth-buildings sourceType
+      const isMatch =
+        layer.isVisible &&
+        layer.extensionId === "tileset" &&
+        layer.property?.default?.sourceType === "reearth-buildings";
+
+      return isMatch;
+    });
+  }, [layers?.flattenLayersRaw]);
+
   return {
     engineRef,
     wrapperRef,
@@ -372,6 +387,7 @@ export default ({
     handleLayerDrop,
     handleInfoboxMaskClick,
     getCredits,
+    hasVisibleReearthBuildingsLayers,
   };
 };
 

web/src/classic/components/molecules/Visualizer/index.tsx

@@ -149,6 +149,7 @@ export default function Visualizer({
     handleLayerDrop,
     handleInfoboxMaskClick,
     getCredits,
+    hasVisibleReearthBuildingsLayers,
   } = useHooks({
     engineType: props.engine,
     rootLayerId,
@@ -204,6 +205,7 @@ export default function Visualizer({
               invisibleWidgetIDs={invisibleWidgetIDs}
               onVisibilityChange={onPluginWidgetVisibilityChange}
               onGetCredits={getCredits}
+              hasVisibleReearthBuildingsLayers={hasVisibleReearthBuildingsLayers}
             />
           )}
           <Engine
@@ -261,6 +263,7 @@ export default function Visualizer({
                   pluginBaseUrl={pluginBaseUrl}
                   viewport={viewport}
                   onGetCredits={getCredits}
+                  hasVisibleReearthBuildingsLayers={hasVisibleReearthBuildingsLayers}
                 />
               ))}
           </Engine>