From 4298c36d692a54114c3d19500cb8413a495724f6 Mon Sep 17 00:00:00 2001
From: Masashi Katsumata <wf9a5m75@gmail.com>
Date: Fri, 6 Nov 2026 09:45:41 -0800
Subject: [PATCH 1/2] Pass image URLs straight to ImageIcon in the samples

The post-office markers and the weather icon on the marker icons page no
longer load their images first; ImageIcon takes the URL and redraws the
markers once the image arrives. Needs js-sdk-core feat/image-icon-url.
---
 .../pages/marker/icons/MarkerIconsPage.tsx    | 20 +++++++++----------
 .../pages/marker/postoffice/postOfficeData.ts | 12 ++++-------
 .../marker/postoffice/usePostOfficeMarkers.ts |  2 +-
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/examples/basic/src/pages/marker/icons/MarkerIconsPage.tsx b/examples/basic/src/pages/marker/icons/MarkerIconsPage.tsx
index 6b83d5c..70895d1 100644
--- a/examples/basic/src/pages/marker/icons/MarkerIconsPage.tsx
+++ b/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(
     () =>
diff --git a/examples/basic/src/pages/marker/postoffice/postOfficeData.ts b/examples/basic/src/pages/marker/postoffice/postOfficeData.ts
index 1c6f9cc..c94c40f 100644
--- a/examples/basic/src/pages/marker/postoffice/postOfficeData.ts
+++ b/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 };
     },
   };
 }
diff --git a/examples/basic/src/pages/marker/postoffice/usePostOfficeMarkers.ts b/examples/basic/src/pages/marker/postoffice/usePostOfficeMarkers.ts
index 95222aa..2e3e08e 100644
--- a/examples/basic/src/pages/marker/postoffice/usePostOfficeMarkers.ts
+++ b/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));

From 2e7ffdb78e39f2c5894a662faaf1f538670dd904 Mon Sep 17 00:00:00 2001
From: Masashi Katsumata <wf9a5m75@gmail.com>
Date: Fri, 6 Nov 2026 13:34:17 -0800
Subject: [PATCH 2/2] Point js-sdk-core at the ImageIcon URL merge

MapConductor/js-sdk-core#24 lets ImageIcon take an image URL, which the
samples now use.
---
 js-sdk-core | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js-sdk-core b/js-sdk-core
index 734f13a..2b5d1c9 160000
--- a/js-sdk-core
+++ b/js-sdk-core
@@ -1 +1 @@
-Subproject commit 734f13ae77861fdb8f587d232872b6b2e2209f0f
+Subproject commit 2b5d1c9d0cfc44adc0723edc5a424bb51d3655a3