Skip to content

Add preloaded bookmarks support #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
giswqs merged 1 commit into from
Mar 8, 2026
Merged

Add preloaded bookmarks support #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion examples/add-control-grid/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Comment on lines +48 to +63
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file mostly uses single quotes, but the newly added bookmark IDs/names use double quotes. If this repo enforces quote style via linting/formatting, this will fail CI or cause noisy diffs later—please make the new strings consistent with the rest of this file’s quote style.

Copilot uses AI. Check for mistakes.
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()) {
Expand Down
61 changes: 53 additions & 8 deletions examples/bookmark-control/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Comment on lines +12 to +20
Copy link

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because storageKey is set, any existing localStorage value for this key (including a previously-saved empty array) will override the bookmarks you pass in, so the “preloaded bookmarks” may not appear for developers who have run this example before. Consider using a versioned/unique storageKey for the example, clearing the key on startup, or noting that localStorage must be cleared to see the preloaded set.

Copilot uses AI. Check for mistakes.
{
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");
Expand All @@ -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");
});
}
});
9 changes: 7 additions & 2 deletions src/lib/core/ControlGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ type OptionalControlGridFields =
| "defaultControls"
| "basemapStyleUrl"
| "excludeLayers"
| "streetViewOptions";
| "streetViewOptions"
| "bookmarkOptions";

/** ControlGrid options with required fields except for optional ones */
type ResolvedControlGridOptions = Required<
Expand Down Expand Up @@ -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. */
Expand Down Expand Up @@ -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":
Expand Down
13 changes: 13 additions & 0 deletions src/lib/core/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}

/**
Expand Down
Loading