Migrate maps-js samples to the latest API surface by manz · Pull Request #142 · Woosmap/js-samples

manz · 2026-10-20T07:31:06Z

Brings the maps-js samples in line with the current API: <wmp-map>, AdvancedMarkerElement / PinElement, the InfoWindow object form with a marker passed straight in as the anchor, and moveCamera(). Samples that load other SDKs (localities, multisearch, store-locator widget) are out of scope.

The SDK host is configurable, and a sample can opt into the importLibrary loader shim (loaderShim flag), which replaces callback=initMap.
setOptions() only moved the camera when the map was built, and every sample works on the existing map through .innerMap, so camera changes silently did nothing. Those calls now use moveCamera(). maps-js #1582 also makes setOptions() move the camera on an existing map, but the samples no longer rely on it.
Solid-color markers use PinElement instead of raster images, and labelled ones use glyphText instead of hand-positioned spans.
JSX is enabled in the per-sample vite/oxc config, otherwise the react-map-* builds fail.
Bumped to @types/woosmap.map 1.4.28, which ships the new API surface. woosmap.map.data.Feature is now woosmap.map.Data.Feature.
The loader shim passes the sample's libraries and language to the script URL. widgets is not an importLibrary() name, so the indoor widget samples never loaded their bundle.
Lint is clean and runs in CI. The config still disabled the pre-v8 typescript-eslint rule names, so those overrides were ignored. Most sample fixes swap any for the real types from 1.4.28.

dist/ is left to the release bot.

The loader shim is opt-in per sample (loaderShim flag): it replaces callback=initMap rather than extending it.

InfoWindow object form, moveCamera, AdvancedMarkerElement, <wmp-map>, and the importLibrary preload shim. Localities/multisearch/store-locator widget samples load separate SDKs, out of scope.

Rolldown-vite's oxc transform needs jsx explicitly enabled; without it every .tsx app build (react-map-*) fails.

maps-js PR #1580 lets InfoWindow.open() take an AdvancedMarkerElement anchor directly. Drops the position-snapshot workaround.

AdvancedMarkerElement content attached via map:/setMap() lands in the map's marker pane inside wmp-map's shadow root, not light DOM. Slotting only applies to markers declared as wmp-map children in markup.

maps-js's AdvancedMarkerElement content now stays in light DOM even for programmatic markers on a shadow-rooted map, so style.scss's .popover rules reach it directly again.

setOptions() only moves the camera at construction; on the already-built map every sample grabs via .innerMap, it silently did nothing.

Flat teardrop icons render natively; labeled markers drop their manual span-positioning code for glyphText.

wgsadmin

Found three issues in the migration.

Blocker: The Test workflow fails because the checked-in type dependency does not expose the API used throughout this PR. Representative output: samples/add-map/index.ts(6,21): error TS2339: Property 'importLibrary' does not exist on type 'typeof map'. The same run reports 280 errors covering MapElement, moveCamera, marker, and the new InfoWindow.open form.
Blocker: The loader no longer requests the widgets bundle, and e2e fails both indoor widget samples with TypeError: woosmap.map.IndoorWidget is not a constructor. The navigation widget has the same latent load path.
Should fix: The external-layer style selector constructs a second map using <wmp-map> itself as the container instead of updating the component's existing innerMap.

The failing workflows are Test (run 39387030521) and e2e (run 39387030574).

wgsadmin · 2026-10-20T07:48:11Z


-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");


Blocker: This first new API call illustrates the repo-wide type-check failure: the current @types/woosmap.map declarations do not include importLibrary, MapElement, moveCamera, the marker namespace, or the object-form InfoWindow.open. The Test workflow stops with 280 TypeScript errors, so every migrated sample currently fails the required compile check. Please make matching declarations available to tsc (for example, update/pin a released types package or add the necessary local declarations) and refresh the lockfile.

Fixed in 97a7d80: bumped to @types/woosmap.map 1.4.28, which ships importLibrary, MapElement, moveCamera, the marker namespace and the object-form InfoWindow.open. test passes now.

wgsadmin · 2026-10-20T07:48:12Z

+        maps[L] = (name, ...args) =>
+          libs.add(name) && load().then(() => maps[L](name, ...args));
+      }
+    })({ key: "{{ WOOSMAP_PUBLIC_API_KEY }}" });


Blocker: The shim drops the sample's existing libraries value. The three indoor widget configs still declare libraries: "widgets", but this loader is invoked with only the key and those samples request only importLibrary("maps"); widgets is not an accepted importLibrary library, so its bundle is never fetched. The e2e job confirms this with woosmap.map.IndoorWidget is not a constructor for both widget samples, and indoor-navigation-widget will reach the same missing bundle later. Please seed/merge the configured libraries into the loader URL, or keep these widget samples on the classic loader path.

Fixed in e1f40da: the shim now starts from the sample's configured libraries (and forwards language), so the widget samples request libraries=widgets,maps and IndoorWidget is defined.

wgsadmin · 2026-10-20T07:48:12Z

 function applyStyle(name: string) {
  const styles = STYLE_PRESETS[name] ?? [];
-  map = new window.woosmap.map.Map(
+  map = new woosmap.map.Map(


Should fix: #map is now a <wmp-map>, which already owns its map in a shadow-root container. Constructing another Map on the custom element when the style changes leaves MapElement.innerMap pointing at the original instance and inserts the second renderer into the host's light-DOM/slot structure; the style dropdown can therefore produce an overlaid, non-interactive map rather than replacing the displayed one. Please reuse the innerMap and apply the new styles with map.setOptions(...) instead of constructing a second map.

Fixed in 9cff871: the style switch now calls innerMap.setOptions({styles}). The layer is still reapplied afterwards since restyling reloads the base style.

Feature moved from woosmap.map.data to woosmap.map.Data in the types.

widgets is not an importLibrary() name, so the indoor widget samples never fetched their bundle.

Mostly any -> real types now that @types/woosmap.map 1.4.28 covers the API.

wgsadmin

Reviewed the latest head against master. The earlier typings, widget-preload, and external-layer issues are addressed.

Should fix: the three React loaders bypass the new configurable SDK host.
Consider: two store samples still depend on setOptions() applying camera fields to an existing innerMap.

A focused tsc --noEmit --skipLibCheck check passes. GitHub’s latest Test and e2e workflow runs were skipped (the triggering review was a COMMENT), so runtime e2e coverage has not been refreshed for this head.

wgsadmin · 2026-10-20T12:01:32Z

+        params.set("libraries", [...libs].join(","));
+        for (const k in g) params.set(k, g[k]);
+        params.set("callback", "woosmap.map." + CB);
+        s.src = "https://sdk.woosmap.com/map/map.js?" + params;


⚠️ WOOSMAP_SDK_HOST does not reach this loader: all three React samples still hard-code production here. A site built with the new host override will therefore exercise production for these samples (and can fail when testing an API not yet on prod), while every layout-driven sample uses the configured host. Could we pass the generated host into installLoaderShim (for example through VITE_WOOSMAP_SDK_HOST) and apply the same change in the other two React samples?

Fixed in a8724d8: the build now emits VITE_WOOSMAP_SDK_HOST and the your-api-key transform swaps the hard-coded host in all three React samples.

wgsadmin · 2026-10-20T12:01:32Z

+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions(mapOptions);


🟡 mapOptions still includes center and zoom, so this line depends on maps-js #1582 to move the existing innerMap camera—the behavior the rest of this PR explicitly avoids. With a configurable host serving a MapElement-capable build from before #1582, this sample stays at the component defaults; stores-search has the same remaining call. Could we pass only non-camera options to setOptions() and call moveCamera() with the camera fields in both samples?

Fixed in 8578f38: center/zoom dropped from mapOptions; both stores-list-sync-map and stores-search now set the camera with moveCamera().

manz added 8 commits September 24, 2026 13:26

Add configurable SDK host, wmp-map sizing, and the loader shim

d61965b

The loader shim is opt-in per sample (loaderShim flag): it replaces callback=initMap rather than extending it.

Migrate maps-js samples to the latest API surface

a3fe5ea

InfoWindow object form, moveCamera, AdvancedMarkerElement, <wmp-map>, and the importLibrary preload shim. Localities/multisearch/store-locator widget samples load separate SDKs, out of scope.

Enable JSX in the per-sample vite/oxc config

1096bb1

Rolldown-vite's oxc transform needs jsx explicitly enabled; without it every .tsx app build (react-map-*) fails.

Pass the marker directly as InfoWindow anchor, not marker.position

5e8645f

maps-js PR #1580 lets InfoWindow.open() take an AdvancedMarkerElement anchor directly. Drops the position-snapshot workaround.

Ship marker-html-css's popover CSS inline with its content

d1d0fc0

AdvancedMarkerElement content attached via map:/setMap() lands in the map's marker pane inside wmp-map's shadow root, not light DOM. Slotting only applies to markers declared as wmp-map children in markup.

Drop marker-html-css's inline CSS workaround

9a23478

maps-js's AdvancedMarkerElement content now stays in light DOM even for programmatic markers on a shadow-rooted map, so style.scss's .popover rules reach it directly again.

Fix camera not applying: use moveCamera(), not setOptions()

185ed00

setOptions() only moves the camera at construction; on the already-built map every sample grabs via .innerMap, it silently did nothing.

Use PinElement for solid-color markers, not raster images

4e37a52

Flat teardrop icons render natively; labeled markers drop their manual span-positioning code for glyphText.

wgsadmin added the ai-reviewer-queued Nairi reviewer has a review in flight for this PR label Oct 20, 2026

wgsadmin reviewed Oct 20, 2026

View reviewed changes

wgsadmin added ai-reviewer-done Nairi reviewer has finished with this PR \u2014 remove to ask again and removed ai-reviewer-queued Nairi reviewer has a review in flight for this PR labels Oct 20, 2026

manz added 3 commits October 20, 2026 13:04

Bump @types/woosmap.map to 1.4.28

97a7d80

Feature moved from woosmap.map.data to woosmap.map.Data in the types.

Pass the sample's libraries and language to the shim

e1f40da

widgets is not an importLibrary() name, so the indoor widget samples never fetched their bundle.

Restyle map-external-layer's map, don't build a second

9cff871

manz removed the ai-reviewer-done Nairi reviewer has finished with this PR \u2014 remove to ask again label Oct 20, 2026

manz added 2 commits October 20, 2026 13:51

Fix the lint config's stale rule names and run lint in CI

c271811

Fix the sample lint errors

5cffddb

Mostly any -> real types now that @types/woosmap.map 1.4.28 covers the API.

wgsadmin added the ai-reviewer-queued Nairi reviewer has a review in flight for this PR label Oct 20, 2026

wgsadmin reviewed Oct 20, 2026

View reviewed changes

wgsadmin added ai-reviewer-done Nairi reviewer has finished with this PR \u2014 remove to ask again and removed ai-reviewer-queued Nairi reviewer has a review in flight for this PR labels Oct 20, 2026

manz added 2 commits October 20, 2026 15:25

Route WOOSMAP_SDK_HOST to the React samples' loader

a8724d8

Move the store samples' camera with moveCamera()

8578f38

manz self-assigned this Oct 21, 2026

Keep the loader shim comment on its function

cc713e0

Navigation Menu

Repository navigation

Migrate maps-js samples to the latest API surface - #142

Migrate maps-js samples to the latest API surface#142
manz wants to merge 16 commits into
masterfrom
maps-js-latest-api

manz commented Oct 20, 2026 •

edited

Loading

Uh oh!

wgsadmin left a comment

Uh oh!

wgsadmin Oct 20, 2026

Uh oh!

manz Oct 20, 2026

Uh oh!

wgsadmin Oct 20, 2026

Uh oh!

manz Oct 20, 2026

Uh oh!

wgsadmin Oct 20, 2026

Uh oh!

manz Oct 20, 2026

Uh oh!

wgsadmin left a comment

Uh oh!

wgsadmin Oct 20, 2026

Uh oh!

manz Oct 21, 2026

Uh oh!

wgsadmin Oct 20, 2026

Uh oh!

manz Oct 21, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

manz commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wgsadmin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wgsadmin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

manz commented Oct 20, 2026 •

edited

Loading