Skip to content

fix: locator initial location rendering #1120

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
k-gerner merged 5 commits into from
Mar 27, 2026
Merged

fix: locator initial location rendering #1120

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aa0d83a
fix initial location render
k-gerner Mar 23, 2026
ddd6148
Merge remote-tracking branch 'origin/main' into locator-map-starting-…
k-gerner Mar 23, 2026
bde72d3
Merge branch 'main' into locator-map-starting-location
k-gerner Mar 24, 2026
bc82043
Merge branch 'main' into locator-map-starting-location
k-gerner Mar 26, 2026
1cfbf0b
merge conf
k-gerner Mar 26, 2026
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
107 changes: 69 additions & 38 deletions packages/visual-editor/src/components/Locator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,21 @@ const DEFAULT_LOCATION_STYLE = {
pinColor: backgroundColors.background6.value,
};

const getConfiguredMapCenterOrDefault = (mapStartingLocation?: {
Comment thread
k-gerner marked this conversation as resolved.
latitude: string;
longitude: string;
}): Coordinate => {
if (mapStartingLocation?.latitude && mapStartingLocation.longitude) {
try {
return parseMapStartingLocation(mapStartingLocation);
} catch (e) {
console.error(e);
}
}

return DEFAULT_MAP_CENTER;
};

const getLocatorConfigFromPageSet = (pageSet?: string): LocatorConfig => {
if (!pageSet) {
return {};
Expand Down Expand Up @@ -989,6 +1004,20 @@ const LocatorWrapper = (props: WithPuckProps<LocatorProps>) => {

type SearchState = "not started" | "loading" | "complete";

const LoadingMapPlaceholder = () => {
const { t } = useTranslation();

return (
<div className="flex items-center justify-center w-full h-full">
<div className="border border-gray-300 rounded-lg p-6 bg-white shadow-md">
<Body className="text-gray-700" variant="lg">
{t("loadingMap", "Loading Map...")}
</Body>
</div>
</div>
);
};

const LocatorInternal = ({
mapStyle,
locationStyles,
Expand Down Expand Up @@ -1313,9 +1342,14 @@ const LocatorInternal = ({
return config;
}, [locationStyles]);

const [centerCoords, setCenterCoords] = React.useState<
Coordinate | undefined
>();
const initialMapCenter = React.useMemo(
() => getConfiguredMapCenterOrDefault(mapStartingLocation),
[mapStartingLocation]
);
const [centerCoords, setCenterCoords] =
React.useState<Coordinate>(initialMapCenter);
const [isInitialMapLocationResolved, setIsInitialMapLocationResolved] =
React.useState(false);

const mapProps = React.useMemo(
() => ({
Expand All @@ -1337,15 +1371,21 @@ const LocatorInternal = ({
);

React.useEffect(() => {
let isCancelled = false;

const resolveLocationAndSearch = async () => {
setIsInitialMapLocationResolved(false);
setCenterCoords(initialMapCenter);
setMapCenter(initialMapCenter);

const radius =
showDistanceOptions && selectedDistanceMeters
? selectedDistanceMeters
: toMeters(DEFAULT_RADIUS, preferredUnit);
// default location filter to NYC
// default location filter to configured starting location or NYC
let initialLocationFilter = buildNearLocationFilterFromCoords(
DEFAULT_MAP_CENTER.latitude,
DEFAULT_MAP_CENTER.longitude,
initialMapCenter.latitude,
initialMapCenter.longitude,
radius
);
const doSearch = () => {
Expand All @@ -1361,17 +1401,21 @@ const LocatorInternal = ({
const filterValue = initialLocationFilter.filter
.value as NearFilterValue;
const centerCoords: Coordinate = {
latitude: filterValue.lat,
longitude: filterValue.lng,
latitude: filterValue.lat,
};
if (
!isCancelled &&
areValidCoordinates(centerCoords.latitude, centerCoords.longitude)
) {
setCenterCoords(centerCoords);
setMapCenter(centerCoords);
setMapRadius(filterValue.radius);
}
}
if (!isCancelled) {
setIsInitialMapLocationResolved(true);
}
};

const foundStartingLocationFromQueryParam = async (
Expand Down Expand Up @@ -1469,29 +1513,22 @@ const LocatorInternal = ({
);
}
} catch {
// 3. Fall back to mapStartingLocation prop
try {
if (mapStartingLocation?.latitude && mapStartingLocation.longitude) {
const centerCoords = parseMapStartingLocation(mapStartingLocation);
initialLocationFilter = buildNearLocationFilterFromCoords(
centerCoords.latitude,
centerCoords.longitude,
radius
);
setCenterCoords(centerCoords);
}
} catch (e) {
console.error(e);
}
} finally {
doSearch();
// Fall back to the configured starting location or default center.
}

doSearch();
};

resolveLocationAndSearch().catch((e) =>
console.error("Failed perform search:", e)
);
}, [searchActions, mapStartingLocation, initialLocationParam]);
resolveLocationAndSearch().catch((e) => {
if (!isCancelled) {
setIsInitialMapLocationResolved(true);
}
console.error("Failed perform search:", e);
});
return () => {
isCancelled = true;
};
}, [initialLocationParam, initialMapCenter, searchActions]);

const handleOpenNowClick = (selected: boolean) => {
if (selected === isOpenNowSelected) {
Expand Down Expand Up @@ -1735,7 +1772,10 @@ const LocatorInternal = ({

{/* Right Section: Map. Hidden for small screens */}
<div id="locatorMapDiv" className="md:flex-1 md:flex hidden relative">
{mapEnabled && <Map {...mapProps} />}
{mapEnabled && isInitialMapLocationResolved && <Map {...mapProps} />}
{mapEnabled && !isInitialMapLocationResolved && (
<LoadingMapPlaceholder />
)}
{!mapEnabled && (
<div className="flex items-center justify-center w-full h-full bg-gray-100">
<div className="p-6">
Expand Down Expand Up @@ -1862,7 +1902,6 @@ const Map: React.FC<MapProps> = ({
markerOptionsOverride,
locationStyleConfig,
}) => {
const { t } = useTranslation();
const entityDocument: StreamDocument = useDocument();

const documentIsUndefined = typeof document === "undefined";
Expand Down Expand Up @@ -1905,15 +1944,7 @@ const Map: React.FC<MapProps> = ({
//@ts-expect-error MapboxGL is not loaded in the iframe content window
if (iframe?.contentDocument && !iframe.contentWindow?.mapboxgl) {
// We are in an iframe, and mapboxgl is not loaded in yet
return (
<div className="flex items-center justify-center w-full h-full">
<div className="border border-gray-300 rounded-lg p-6 bg-white shadow-md">
<Body className="text-gray-700" variant="lg">
{t("loadingMap", "Loading Map...")}
</Body>
</div>
</div>
);
return <LoadingMapPlaceholder />;
}

let mapboxApiKey = entityDocument._env?.YEXT_MAPBOX_API_KEY;
Expand Down
Loading