Skip to content
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

fix: Map offset in edition page #743

Merged
merged 1 commit into from
Sep 27, 2022
Merged

fix: Map offset in edition page #743

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
40 changes: 30 additions & 10 deletions app/charts/map/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,9 @@ const useStyles = makeStyles<Theme>((theme) => ({

// Debounced function fixes the problem of maximizing window or opening a console,
// when map was not resized initially.
const resize = debounce((e: MapboxEvent, bbox: BBox) => {
if (e.originalEvent) {
e.target.resize();
e.target.fitBounds(bbox, { duration: 0 });
}
const resizeAndFit = debounce((map: mapboxgl.Map, bbox: BBox) => {
map.resize();
map.fitBounds(bbox, { duration: 0 });
}, 0);

export const MapComponent = () => {
Expand Down Expand Up @@ -306,6 +304,31 @@ export const MapComponent = () => {

const dataLoaded = features.areaLayer || features.symbolLayer;

const redrawMap = useEvent(() => {
if (!mapNodeRef.current) {
return;
}
const map = mapNodeRef.current.getMap() as mapboxgl.Map;
const bbox = map.getBounds().toArray() as BBox;
currentBBox.current = bbox;
resizeAndFit(map, lockedBBox || bbox);
});

const handleResize = useEvent((e: MapboxEvent) => {
if (e.originalEvent) {
redrawMap();
}
});

/**
* Redraw the map when style data has been downloaded to solve an offset problem between the viz
* layer and the base layer happening in Edge under precise conditions (Windows 10, Edge 105,
* resolution 1440x900).
*/
const handleStyleData = useEvent(() => {
redrawMap();
});

return (
<>
{locked ? null : (
Expand All @@ -322,6 +345,7 @@ export const MapComponent = () => {
initialViewState={defaultViewState}
mapLib={maplibregl}
mapStyle={mapStyle}
onStyleData={handleStyleData}
style={{
position: "absolute",
left: 0,
Expand All @@ -348,11 +372,7 @@ export const MapComponent = () => {

onViewStateChange(e);
}}
onResize={(e) => {
const bbox = e.target.getBounds().toArray() as BBox;
currentBBox.current = bbox;
resize(e, lockedBBox || bbox);
}}
onResize={handleResize}
{...viewState}
>
<DeckGLOverlay
Expand Down