center on init load

This commit is contained in:
ccmdi 2025-10-10 12:34:17 -04:00
parent 1fd8498f5e
commit fbe97825d9
No known key found for this signature in database
2 changed files with 37 additions and 11 deletions

View file

@ -382,18 +382,28 @@ export async function createMapRenderer(config: MapRendererOptions): Promise<Dec
// calculate bounds
let initialViewState: MapViewState;
if (options.center && options.center[0] !== 0 && options.center[1] !== 0) {
const hasConfiguredCenter = options.center && (options.center[0] !== 0 || options.center[1] !== 0);
if (hasConfiguredCenter && options.zoom) {
initialViewState = {
longitude: options.center[1],
latitude: options.center[0],
zoom: options.zoom || 4,
longitude: options.center![1],
latitude: options.center![0],
zoom: options.zoom,
pitch: 0,
bearing: 0,
};
} else if (points.length > 0) {
const bounds = calculateBounds(points, containerEl);
initialViewState = {
...bounds,
pitch: 0,
bearing: 0,
};
} else {
const bounds = calculateBounds(points, containerEl);
initialViewState = {
...bounds,
longitude: 0,
latitude: 0,
zoom: 2,
pitch: 0,
bearing: 0,
};
@ -402,6 +412,7 @@ export async function createMapRenderer(config: MapRendererOptions): Promise<Dec
let currentCursor = 'grab';
let currentPoint: MapPoint | null = null;
let tooltipUpdateId = 0;
let tilesLoadedCalled = false;
const updateTooltip = async (point: MapPoint, x: number, y: number) => {
const thisUpdateId = ++tooltipUpdateId;
@ -496,10 +507,11 @@ export async function createMapRenderer(config: MapRendererOptions): Promise<Dec
},
views: [new MapViewType({ repeat: true })],
onAfterRender: () => {
if (options.onTilesLoaded) {
if (options.onTilesLoaded && !tilesLoadedCalled) {
tilesLoadedCalled = true;
setTimeout(() => {
options.onTilesLoaded?.();
}, 100);
}, 200);
}
},
getCursor: () => currentCursor,

View file

@ -211,6 +211,21 @@ export class MapBasesView extends BasesView {
}, 300);
};
const hasConfiguredCenter = this.center[0] !== 0 || this.center[1] !== 0;
let centerToUse: [number, number];
let zoomToUse: number;
if (hasConfiguredCenter) {
centerToUse = this.center;
zoomToUse = this.defaultZoom;
} else if (this.savedViewState) {
centerToUse = [this.savedViewState.latitude, this.savedViewState.longitude];
zoomToUse = this.savedViewState.zoom;
} else {
centerToUse = this.center;
zoomToUse = this.defaultZoom;
}
this.deck = await createMapRenderer({
containerEl: this.mapEl,
points,
@ -218,8 +233,8 @@ export class MapBasesView extends BasesView {
settings: settings,
tagSettings: tagSettings,
options: {
center: this.savedViewState ? [this.savedViewState.latitude, this.savedViewState.longitude] : this.center,
zoom: this.savedViewState ? this.savedViewState.zoom : this.defaultZoom,
center: centerToUse,
zoom: zoomToUse,
height: height,
markerType: this.markerType,
tileLayer: this.tileLayer,
@ -256,7 +271,6 @@ export class MapBasesView extends BasesView {
const points = this.extractPointsFromData();
// If center coordinates are configured, use them instead of auto-centering
const hasConfiguredCenter = this.center[0] !== 0 || this.center[1] !== 0;
updateMapPoints(this.deck, points, {