Pass image URLs straight to ImageIcon in the samples

examples/basic/src/pages/marker/icons/MarkerIconsPage.tsx

@@ -68,7 +68,6 @@ interface MarkerDefinition {
 }
 
 export function MarkerIconsPage() {
-  const weatherImage = useLoadedImage(WEATHER_ICON_URL);
   const humanImage = useLoadedImage(HUMAN_ICON_URL);
   const launcherImage = useLoadedImage(LAUNCHER_ICON_URL);
   const weatherPngUrl = useRasterizedDataUrl(WEATHER_ICON_URL);
@@ -282,19 +281,18 @@ export function MarkerIconsPage() {
       });
     }
 
-    if (weatherImage) {
-      definitions.splice(9, 0, {
-        id: 'image-weather',
-        lat: 0.01,
-        lng: 0.009,
-        icon: new ImageIcon(weatherImage, { debug: true, anchor: { x: 0.5, y: 1 } }),
-        extra: `ImageIcon(
+    // ImageIcon には画像の URL をそのまま渡せる。読み終えたら SDK が描き直す。
+    definitions.splice(9, 0, {
+      id: 'image-weather',
+      lat: 0.01,
+      lng: 0.009,
+      icon: new ImageIcon(WEATHER_ICON_URL, { debug: true, anchor: { x: 0.5, y: 1 } }),
+      extra: `ImageIcon(
   drawable = icon,
   debug = true,
   anchor = PointF(0.5, 1.0),
 )`,
-      });
-    }
+    });
 
     if (labelImage) {
       definitions.splice(10, 0, {
@@ -310,7 +308,7 @@ export function MarkerIconsPage() {
     }
 
     return definitions;
-  }, [defaultMarkerPngUrl, humanImage, labelImage, launcherImage, thumbnailPngUrl, weatherImage, weatherPngUrl]);
+  }, [defaultMarkerPngUrl, humanImage, labelImage, launcherImage, thumbnailPngUrl, weatherPngUrl]);
 
   const markers = useMemo(
     () =>

examples/basic/src/pages/marker/postoffice/postOfficeData.ts

@@ -2,7 +2,8 @@ export type PostOfficeRecord = readonly [number, number, string, string];
 
 export interface PostOfficeAssets {
   records: PostOfficeRecord[];
-  markerImage: HTMLImageElement;
+  /** マーカーの画像。ImageIcon に URL のまま渡す（読み込みは SDK がする）。 */
+  markerImageUrl: string;
   clusterImage?: HTMLImageElement;
 }
 
@@ -26,16 +27,11 @@ export function createPostOfficeDataSource(baseUrl: string): PostOfficeDataSourc
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         return response.json() as Promise<PostOfficeRecord[]>;
       });
-      const markerImagePromise = loadImage(`${baseUrl}postoffice/postoffice.webp`);
       const clusterImagePromise = includeClusterImage
         ? loadImage(`${baseUrl}postoffice/cluster_red.png`)
         : Promise.resolve(undefined);
-      const [records, markerImage, clusterImage] = await Promise.all([
-        recordsPromise,
-        markerImagePromise,
-        clusterImagePromise,
-      ]);
-      return { records, markerImage, clusterImage };
+      const [records, clusterImage] = await Promise.all([recordsPromise, clusterImagePromise]);
+      return { records, markerImageUrl: `${baseUrl}postoffice/postoffice.webp`, clusterImage };
     },
   };
 }

examples/basic/src/pages/marker/postoffice/usePostOfficeMarkers.ts

@@ -34,7 +34,7 @@ export function usePostOfficeMarkers(
     dataSource.load(includeClusterImage).then(assets => {
       if (!active) return;
       setRecords(assets.records);
-      setIcon(new ImageIcon(assets.markerImage, { scale: iconScale }));
+      setIcon(new ImageIcon(assets.markerImageUrl, { scale: iconScale }));
       setClusterImage(assets.clusterImage ?? null);
     }).catch(reason => {
       if (active) setError(String(reason));