Add preloaded bookmarks support for BookmarkControl and ControlGrid (#76)

- Add bookmarkOptions to ControlGridOptions so bookmark settings (including
  preloaded bookmarks) can be passed through addControlGrid()
- Add preloaded bookmarks (SF, NYC, London, Tokyo, Paris) to both the
  bookmark-control and add-control-grid examples

Author: giswqs

examples/add-control-grid/main.ts

@@ -42,7 +42,63 @@ const layerControl = new LayerControl({
 map.addControl(layerControl, 'top-right');
 
 // Add a ControlGrid with all default controls in one call
-const controlGrid = addControlGrid(map, { basemapStyleUrl: BASEMAP_STYLE });
+const controlGrid = addControlGrid(map, {
+  basemapStyleUrl: BASEMAP_STYLE,
+  bookmarkOptions: {
+    bookmarks: [
+      {
+        id: "san-francisco",
+        name: "San Francisco",
+        lng: -122.4194,
+        lat: 37.7749,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "new-york",
+        name: "New York City",
+        lng: -74.006,
+        lat: 40.7128,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "london",
+        name: "London",
+        lng: -0.1276,
+        lat: 51.5074,
+        zoom: 11,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "tokyo",
+        name: "Tokyo",
+        lng: 139.6917,
+        lat: 35.6895,
+        zoom: 11,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "paris",
+        name: "Paris",
+        lng: 2.3522,
+        lat: 48.8566,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+    ],
+  },
+});
 
 // Register data-layer adapters so COG, Zarr, PMTiles layers appear in the LayerControl
 for (const adapter of controlGrid.getAdapters()) {

examples/bookmark-control/main.ts

@@ -9,14 +9,66 @@ const map = new maplibregl.Map({
 });
 
 map.on("load", () => {
-  // Add the BookmarkControl with localStorage persistence
+  // Add the BookmarkControl with localStorage persistence and preloaded bookmarks
   const bookmarkControl = new BookmarkControl({
     position: "top-right",
     collapsed: true,
     storageKey: "maplibre-bookmarks-demo",
     maxBookmarks: 20,
     flyToDuration: 2000,
     generateThumbnails: false,
+    bookmarks: [
+      {
+        id: "san-francisco",
+        name: "San Francisco",
+        lng: -122.4194,
+        lat: 37.7749,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "new-york",
+        name: "New York City",
+        lng: -74.006,
+        lat: 40.7128,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "london",
+        name: "London",
+        lng: -0.1276,
+        lat: 51.5074,
+        zoom: 11,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "tokyo",
+        name: "Tokyo",
+        lng: 139.6917,
+        lat: 35.6895,
+        zoom: 11,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+      {
+        id: "paris",
+        name: "Paris",
+        lng: 2.3522,
+        lat: 48.8566,
+        zoom: 12,
+        pitch: 0,
+        bearing: 0,
+        createdAt: Date.now(),
+      },
+    ],
   });
 
   map.addControl(bookmarkControl, "top-right");
@@ -38,11 +90,4 @@ map.on("load", () => {
     console.log("Bookmarks imported:", event.state.bookmarks.length, "total");
   });
 
-  // Add some sample bookmarks if none exist
-  if (bookmarkControl.getBookmarks().length === 0) {
-    // Navigate to SF and add bookmark
-    map.once("moveend", () => {
-      bookmarkControl.addBookmark("San Francisco");
-    });
-  }
 });

src/lib/core/ControlGrid.ts

@@ -64,7 +64,8 @@ type OptionalControlGridFields =
   | "defaultControls"
   | "basemapStyleUrl"
   | "excludeLayers"
-  | "streetViewOptions";
+  | "streetViewOptions"
+  | "bookmarkOptions";
 
 /** ControlGrid options with required fields except for optional ones */
 type ResolvedControlGridOptions = Required<
@@ -96,6 +97,7 @@ const DEFAULT_OPTIONS: ResolvedControlGridOptions = {
   basemapStyleUrl: undefined,
   excludeLayers: undefined,
   streetViewOptions: undefined,
+  bookmarkOptions: undefined,
 };
 
 /** Wrench icon SVG for collapsed state – stroke style matching MapLibre globe icon. */
@@ -369,7 +371,10 @@ export class ControlGrid implements IControl {
       case "measure":
         return new MeasureControl({ collapsed: true });
       case "bookmark":
-        return new BookmarkControl({ collapsed: true });
+        return new BookmarkControl({
+          collapsed: true,
+          ...this._options.bookmarkOptions,
+        });
       case "print":
         return new PrintControl({ collapsed: true });
       case "zarrLayer":

src/lib/core/types.ts

@@ -1398,6 +1398,19 @@ export interface ControlGridOptions {
    * from Vite env vars (`VITE_GOOGLE_MAPS_API_KEY`, `VITE_MAPILLARY_ACCESS_TOKEN`).
    */
   streetViewOptions?: Partial<StreetViewControlOptions>;
+  /**
+   * Optional Bookmark control options (e.g. preloaded bookmarks).
+   *
+   * @example
+   * ```typescript
+   * bookmarkOptions: {
+   *   bookmarks: [
+   *     { id: 'nyc', name: 'New York', lng: -74.006, lat: 40.7128, zoom: 12, pitch: 0, bearing: 0, createdAt: Date.now() },
+   *   ],
+   * }
+   * ```
+   */
+  bookmarkOptions?: Partial<BookmarkControlOptions>;
 }
 
 /**