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; }); - 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)); 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