diff --git a/examples/add-control-grid/main.ts b/examples/add-control-grid/main.ts index c6dfea2..24a2ef2 100644 --- a/examples/add-control-grid/main.ts +++ b/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()) { diff --git a/examples/bookmark-control/main.ts b/examples/bookmark-control/main.ts index 4c6b016..b1f4647 100644 --- a/examples/bookmark-control/main.ts +++ b/examples/bookmark-control/main.ts @@ -9,7 +9,7 @@ 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, @@ -17,6 +17,58 @@ map.on("load", () => { 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"); - }); - } }); diff --git a/src/lib/core/ControlGrid.ts b/src/lib/core/ControlGrid.ts index db6bd3e..9fc84f6 100644 --- a/src/lib/core/ControlGrid.ts +++ b/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": diff --git a/src/lib/core/types.ts b/src/lib/core/types.ts index 998743c..667b658 100644 --- a/src/lib/core/types.ts +++ b/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; + /** + * 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; } /**