Migrate maps-js samples to the latest API surface

.github/workflows/test.yml

@@ -27,3 +27,4 @@ jobs:
             ${{ runner.os }}-node
       - run: npm i
       - run: npm run test:check
+      - run: npm run lint

eslint.config.mjs

@@ -33,9 +33,13 @@ export default [
       node: true,
     },
     rules: {
-      "no-unused-vars": [1, { varsIgnorePattern: "init*" }],
+      // The TS rule replaces the base one under @typescript-eslint/recommended,
+      // so the initMap-style callback exemption has to live on it.
+      "no-unused-vars": 0,
+      "@typescript-eslint/no-unused-vars": [2, { varsIgnorePattern: "^init" }],
       "no-var": 2,
-      "@typescript-eslint/no-var-requires": 0,
+      // The build scripts are CommonJS (typescript-eslint v8 renamed no-var-requires).
+      "@typescript-eslint/no-require-imports": 0,
       "prefer-arrow-callback": 2,
     },
   }),

package.json

@@ -41,7 +41,7 @@
     "@playwright/test": "^1.60.0",
     "@types/geojson": "^7946.0.16",
     "@types/supercluster": "^7.1.3",
-    "@types/woosmap.map": "^1.4.26",
+    "@types/woosmap.map": "^1.4.28",
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.15.0",
     "chalk": "^5.6.2",

samples/add-map/add-map.json

@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }

samples/add-map/index.njk

@@ -2,6 +2,6 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}

samples/add-map/index.ts

@@ -2,7 +2,9 @@
 // Initialize and add the map
 let map: woosmap.map.Map;
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+
   // [START woosmap_add_map_instantiate_map]
   // The location of London
   const position: woosmap.map.LatLngLiteral = {
@@ -11,19 +13,15 @@ function initMap(): void {
   };
 
   // The map, centered at London
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.moveCamera({
     zoom: 13,
     center: position,
   });
   // [END woosmap_add_map_instantiate_map]
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_add_map]
 
 export {};

samples/datasets-api/datasets-api.json

@@ -11,5 +11,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }

samples/datasets-api/index.njk

@@ -38,7 +38,7 @@
             </div>
         </div>
         <div id="mapContainer">
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="autocomplete-container">
                 {% svgIcon 'search.svg' %}
                 <input

samples/datasets-api/index.ts

@@ -11,16 +11,22 @@ let suggestionsList: HTMLUListElement;
 let clearSearchBtn: HTMLButtonElement;
 let datasetSelect: HTMLSelectElement;
 let operatorSelect: HTMLSelectElement;
-let debouncedLocalitiesAutocomplete: (...args: any[]) => Promise<any>;
+let debouncedLocalitiesAutocomplete: (
+  request: woosmap.map.localities.LocalitiesAutocompleteRequest,
+) => Promise<woosmap.map.localities.LocalitiesAutocompleteResponse>;
 let results: HTMLOListElement;
 let resetButton: HTMLButtonElement;
 
 const datasetId = "a01df3d6-fe7d-42df-8fee-9f31726a2641"; //US - Seismic Hazard Map
 
-function initMap(): void {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("drawing");
+
   // [START woosmap_datasets_api_instantiate_map]
 
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.setOptions({
     gestureHandling: "auto",
     defaultStyle: "streets",
   });
@@ -41,7 +47,7 @@ function initServices(): void {
   datasetsService = new woosmap.map.DatasetsService(datasetId);
   datasetsOverlay.setMap(map);
 
-  localitiesService = new window.woosmap.map.LocalitiesService();
+  localitiesService = new woosmap.map.LocalitiesService();
   request = {
     input: "",
     types: ["locality", "address", "postal_code"],
@@ -60,7 +66,7 @@ function initDrawing(): void {
     },
   });
   drawTools.addControl(map);
-  drawTools.addListener("draw.create", async (ev) => {
+  drawTools.addListener("draw.create", async () => {
     const collection = drawTools.getAll();
     if (collection.features.length > 1) {
       for (const feature of collection.features.slice(0, -1)) {
@@ -210,7 +216,7 @@ function manageFiltersElements() {
     const selectElement = event.target as HTMLSelectElement;
     updateDataset(selectElement.value);
   });
-  operatorSelect.addEventListener("change", async (ev) => {
+  operatorSelect.addEventListener("change", async () => {
     const collection = drawTools.getAll();
     await intersectCb(collection);
   });
@@ -245,16 +251,16 @@ async function intersectCb(ev) {
 
   await applyOperator(ev.features[0].geometry, operatorSelect.value)
     .then((response) => {
-      const features = [];
+      const features: woosmap.map.GeoJSONFeature[] = [];
       bindResultsToPanel(response.features);
       map.data.forEach((feature) => {
         map.data.remove(feature);
       });
       for (const feature of response.features) {
-        // @ts-ignore TypeDef to be updated
         features.push({
           type: "Feature",
           geometry: feature.geometry,
+          properties: {},
         });
       }
 
@@ -282,28 +288,28 @@ function bindResultsToPanel(features: woosmap.map.GeoJSONFeature[]) {
             resultListItem.innerHTML +
             `<tr><td><b>${key} </b></td><td>${attributes[key]}</td></tr>`;
         }
-      }),
-        results.appendChild(resultListItem);
+      });
+      results.appendChild(resultListItem);
     });
   } else {
     results.innerHTML = "No results found";
     results.classList.add("error");
   }
 }
 // [START woosmap_localities_autocomplete_debounce_promise]
-let PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+let PRESERVE_COMMENT_ABOVE; // eslint-disable-line no-unassigned-vars -- force tsc to maintain the comment above
 
-type DebouncePromiseFunction<T, Args extends any[]> = (
+type DebouncePromiseFunction<T, Args extends unknown[]> = (
   ...args: Args
 ) => Promise<T>;
 
-function debouncePromise<T, Args extends any[]>(
+function debouncePromise<T, Args extends unknown[]>(
   fn: (...args: Args) => Promise<T>,
   delay: number,
 ): DebouncePromiseFunction<T, Args> {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let latestResolve: ((value: T | PromiseLike<T>) => void) | null = null;
-  let latestReject: ((reason?: any) => void) | null = null;
+  let latestReject: ((reason?: unknown) => void) | null = null;
 
   return function (...args: Args): Promise<T> {
     return new Promise<T>((resolve, reject) => {
@@ -330,14 +336,9 @@ function debouncePromise<T, Args extends any[]>(
 }
 
 // [END woosmap_localities_autocomplete_debounce_promise] */
-PRESERVE_COMMENT_ABOVE; // force tsc to maintain the comment above eslint-disable-line
+PRESERVE_COMMENT_ABOVE; // eslint-disable-line @typescript-eslint/no-unused-expressions -- force tsc to maintain the comment above
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_datasets_api]
 
 export {};

samples/directions-advanced/directions-advanced.json

@@ -10,5 +10,7 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "libraries": "marker",
+  "loaderShim": true
 }

samples/directions-advanced/index.njk

@@ -200,7 +200,7 @@
             <div class="linear-progress hide">
                 <div class="progress"></div>
             </div>
-            <div id="map"></div>
+            <wmp-map id="map"></wmp-map>
             <div id="infoMessage">Drag markers to update route</div>
             <div class="tableContainer">
             </div>

samples/directions-advanced/index.ts

@@ -3,7 +3,7 @@ let map: woosmap.map.Map;
 let bounds: woosmap.map.LatLngBounds;
 let directionsService: woosmap.map.DirectionsService;
 let directionsRequest: woosmap.map.DirectionRequest;
-let markersArray: woosmap.map.Marker[] = [];
+let markersArray: woosmap.map.marker.AdvancedMarkerElement[] = [];
 let waypointsList: HTMLElement;
 let originContainer: HTMLElement;
 let destinationContainer: HTMLElement;
@@ -18,24 +18,15 @@ const travelModeIcons = {
 function createMarker(
   position: woosmap.map.LatLngLiteral | woosmap.map.LatLng,
   label: string,
-  url: string,
-): woosmap.map.Marker {
-  return new woosmap.map.Marker({
+  background: string,
+): woosmap.map.marker.AdvancedMarkerElement {
+  const { PinElement } = woosmap.map.marker;
+  const pin = new PinElement({ background, glyphText: label, glyphColor: "#FFFFFF" });
+  return new woosmap.map.marker.AdvancedMarkerElement({
     map,
     position,
-    draggable: true,
-    icon: {
-      url,
-      labelOrigin: new woosmap.map.Point(13, 15),
-      scaledSize: {
-        height: 38,
-        width: 26,
-      },
-    },
-    label: {
-      text: label,
-      color: "white",
-    },
+    gmpDraggable: true,
+    content: pin.element,
   });
 }
 
@@ -48,26 +39,18 @@ function clearMarkers(): void {
 
 function displayDirectionsMarkers(): void {
   clearMarkers();
-  const originMarker = createMarker(
-    directionsRequest.origin,
-    "O",
-    "https://images.woosmap.com/marker-blue.svg",
-  );
+  const originMarker = createMarker(directionsRequest.origin, "O", "#3d5afe");
   originMarker.addListener("dragend", () => {
-    directionsRequest.origin = originMarker.getPosition();
-    setLatLngToContainer(originContainer, originMarker.getPosition().toJSON());
+    directionsRequest.origin = originMarker.position!;
+    setLatLngToContainer(originContainer, originMarker.position!.toJSON());
     calculateDirections();
   });
-  const destinationMarker = createMarker(
-    directionsRequest.destination,
-    "D",
-    "https://images.woosmap.com/marker-red.svg",
-  );
+  const destinationMarker = createMarker(directionsRequest.destination, "D", "#f50057");
   destinationMarker.addListener("dragend", () => {
-    directionsRequest.destination = destinationMarker.getPosition();
+    directionsRequest.destination = destinationMarker.position!;
     setLatLngToContainer(
       destinationContainer,
-      destinationMarker.getPosition().toJSON(),
+      destinationMarker.position!.toJSON(),
     );
     calculateDirections();
   });
@@ -80,12 +63,12 @@ function displayDirectionsMarkers(): void {
     const waypointMarker = createMarker(
       waypoint.location as woosmap.map.LatLngLiteral,
       (index + 1).toString(),
-      "https://images.woosmap.com/marker-green.svg",
+      "#03BDA5",
     );
     waypointMarker.addListener("dragend", () => {
-      waypoints[index].location = waypointMarker.getPosition().toJSON();
+      waypoints[index].location = waypointMarker.position!.toJSON();
       waypointsList.querySelectorAll("li")[index].innerHTML =
-        `<span>lat: ${waypointMarker.getPosition().lat().toFixed(4)}, lng: ${waypointMarker.getPosition().lng().toFixed(4)}<span>`;
+        `<span>lat: ${waypointMarker.position!.lat().toFixed(4)}, lng: ${waypointMarker.position!.lng().toFixed(4)}<span>`;
       calculateDirections();
     });
     markersArray.push(waypointMarker);
@@ -522,8 +505,12 @@ function initUI(): void {
   );
 }
 
-function initMap(): void {
-  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+async function initMap(): Promise<void> {
+  await woosmap.map.importLibrary("maps");
+  await woosmap.map.importLibrary("marker");
+
+  map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
+  map.moveCamera({
     center: { lat: 51.5074, lng: -0.1478 },
     zoom: 10,
   });
@@ -539,12 +526,7 @@ function initMap(): void {
   calculateDirections();
 }
 
-declare global {
-  interface Window {
-    initMap: () => void;
-  }
-}
-window.initMap = initMap;
+initMap();
 // [END woosmap_directions_advanced]
 
 export {};

samples/directions-simple/directions-simple.json

@@ -10,5 +10,6 @@
     "size": 1,
     "alias": "mode"
   },
-  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}",
+  "loaderShim": true
 }

samples/directions-simple/index.njk

@@ -81,5 +81,5 @@
         </div>
     </div>
     <!--The div element for the map -->
-    <div id="map"></div>
+    <wmp-map id="map"></wmp-map>
 {% endblock %}