Skip to content

Commit 4974cfb

Browse files
jbooleanjboolean
committed
Use async style loading and version file
1 parent 35de827 commit 4974cfb

File tree

6 files changed

+5891
-5811
lines changed

6 files changed

+5891
-5811
lines changed

‎backend/src/cron/syncMapSelfHosted.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,6 @@ export default async function syncMap(): Promise<void> {
4848
})
4949
);
5050

51-
// Setup, this specifies a redirect from photos-1940s_latest.pmtiles to the actual latest file
52-
// Website mode isn't appropriate for this bucket due to permissioning, which is required to respect this header,
53-
// so there's a Lambda@Edge that actually does the redirect based on the same website redirect header
54-
55-
await s3.send(
56-
new PutObjectCommand({
57-
Bucket: 'fourties-maps',
58-
Key: `photos-1940s_latest.pmtiles`,
59-
WebsiteRedirectLocation: `/${key}`,
60-
Body: undefined,
61-
ContentType: 'application/vnd.pmtiles',
62-
CacheControl: 'no-cache'
63-
})
64-
);
65-
6651
// Save a version file that points to the latest PMTiles file
6752
const versionFileContent = JSON.stringify({
6853
currentKey: key,

‎frontend/src/screens/App/screens/Corrections/components/LocationPickerModal.tsx‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '../../MapPane/components/MainMap/overlays';
1515
import stylesheet from './LocationPickerModal.less';
1616

17-
import mapStyleUrl from 'screens/App/shared/mapStyles/fourties.protomaps.style.json';
17+
import { getStyle } from 'screens/App/shared/mapStyles/fourties.protomaps.style';
1818

1919
const DEFAULT_LNG_LAT = [-73.99397, 40.7093] as const;
2020

@@ -53,52 +53,61 @@ export default function LocationPickerModal(): JSX.Element {
5353
correctedLat ?? previousLat ?? DEFAULT_LNG_LAT[1],
5454
] as [number, number];
5555

56-
// MapLibre implementation
57-
map.current = new maplibregl.Map({
58-
container: mapContainer.current,
59-
style: mapStyleUrl as unknown as string,
60-
center: startingPosition,
61-
maxBounds: [
62-
[-74.25908989999999, 40.4773991], // SW
63-
[-73.70027209999999, 40.9175771], // NE
64-
],
65-
zoom: 17,
66-
hash: false,
67-
attributionControl: {
68-
compact: false,
69-
},
70-
});
56+
getStyle()
57+
.then((style) => {
58+
// MapLibre implementation
59+
map.current = new maplibregl.Map({
60+
container: mapContainer.current,
61+
style: style,
62+
center: startingPosition,
63+
maxBounds: [
64+
[-74.25908989999999, 40.4773991], // SW
65+
[-73.70027209999999, 40.9175771], // NE
66+
],
67+
zoom: 17,
68+
hash: false,
69+
attributionControl: {
70+
compact: false,
71+
},
72+
});
7173

72-
map.current.on('style.load', () => {
73-
map.current.setFilter('photos-1940s', [
74-
'!=',
75-
['get', 'photoIdentifier'],
76-
photo.identifier || null,
77-
]);
74+
map.current.on('style.load', () => {
75+
map.current.setFilter('photos-1940s', [
76+
'!=',
77+
['get', 'photoIdentifier'],
78+
photo.identifier || null,
79+
]);
7880

79-
map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
80-
installLayers(map.current, 'photos-1940s', {
81-
fadeOverlays: false,
82-
});
83-
setOverlay(map.current, ['default-map', 'bbl-label']);
84-
});
81+
map.current.addControl(
82+
new maplibregl.NavigationControl(),
83+
'top-right'
84+
);
85+
installLayers(map.current, 'photos-1940s', {
86+
fadeOverlays: false,
87+
});
88+
setOverlay(map.current, ['default-map', 'bbl-label']);
89+
});
8590

86-
map.current.on('moveend', () => {
87-
const center = map.current.getCenter();
88-
setCorrectedLngLat(round(center.lng, 6), round(center.lat, 6));
89-
});
91+
map.current.on('moveend', () => {
92+
const center = map.current.getCenter();
93+
setCorrectedLngLat(round(center.lng, 6), round(center.lat, 6));
94+
});
9095

91-
// Add marker for center position
92-
const marker = new maplibregl.Marker({
93-
draggable: false,
94-
color: '#87b6a8',
95-
})
96-
.setLngLat(startingPosition)
97-
.addTo(map.current);
96+
// Add marker for center position
97+
const marker = new maplibregl.Marker({
98+
draggable: false,
99+
color: '#87b6a8',
100+
})
101+
.setLngLat(startingPosition)
102+
.addTo(map.current);
98103

99-
map.current.on('move', () => {
100-
marker.setLngLat(map.current.getCenter());
101-
});
104+
map.current.on('move', () => {
105+
marker.setLngLat(map.current.getCenter());
106+
});
107+
})
108+
.catch((error) => {
109+
console.error('Error loading map style:', error);
110+
});
102111
};
103112

104113
const destroyMap = (): void => {

‎frontend/src/screens/App/screens/MapPane/components/MainMap/MapLibreMap.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export { OverlayId } from './overlays';
1313
import { RouteComponentProps } from 'react-router';
1414
import stylesheet from './MainMap.less';
1515

16-
import mapStyleUrl from 'screens/App/shared/mapStyles/fourties.protomaps.style.json';
16+
import { getStyle } from 'screens/App/shared/mapStyles/fourties.protomaps.style';
1717

1818
const PHOTO_LAYER = 'photos-1940s';
1919

@@ -26,10 +26,10 @@ class MapLibreMap
2626
private mapContainer: HTMLElement;
2727
private map: maplibregl.Map;
2828

29-
componentDidMount(): void {
29+
async componentDidMount(): Promise<void> {
3030
const map: maplibregl.Map = new maplibregl.Map({
3131
container: this.mapContainer,
32-
style: mapStyleUrl as unknown as string,
32+
style: await getStyle(),
3333
center: [-73.99397, 40.7093],
3434
zoom: 13.69,
3535
maxBounds: [

‎frontend/src/screens/App/screens/Merch/screens/Orders/components/CustomizeModal.tsx‎

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { MerchCustomizationOptions } from 'shared/utils/merch/Order';
1414
import useElementId from 'shared/utils/useElementId';
1515
import stylesheet from './CustomizeModal.less';
1616

17-
import mapStyleUrl from 'screens/App/shared/mapStyles/fourties.protomaps.style.json';
17+
import { getStyle } from 'screens/App/shared/mapStyles/fourties.protomaps.style';
1818

1919
const DEFAULT_LNG_LAT = {
2020
lng: -73.98196612358352,
@@ -95,52 +95,62 @@ const CustomizeBack = (): JSX.Element => {
9595
customizationOptions?.lat ??
9696
DEFAULT_LNG_LAT.lat,
9797
] as [number, number];
98-
map.current = new maplibregl.Map({
99-
container: mapContainer.current,
100-
style: mapStyleUrl as unknown as string,
101-
center: startingPosition,
102-
maxBounds: [
103-
[-74.25908989999999, 40.4773991], // SW
104-
[-73.70027209999999, 40.9175771], // NE
105-
],
106-
zoom: 17,
107-
hash: false,
108-
attributionControl: {
109-
compact: false,
110-
},
111-
});
11298

113-
map.current.on('style.load', () => {
114-
map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
115-
installLayers(map.current, 'photos-1940s', {
116-
fadeOverlays: false,
117-
});
118-
setOverlay(map.current, 'default-map');
119-
});
99+
getStyle()
100+
.then((style) => {
101+
map.current = new maplibregl.Map({
102+
container: mapContainer.current,
103+
style: style,
104+
center: startingPosition,
105+
maxBounds: [
106+
[-74.25908989999999, 40.4773991], // SW
107+
[-73.70027209999999, 40.9175771], // NE
108+
],
109+
zoom: 17,
110+
hash: false,
111+
attributionControl: {
112+
compact: false,
113+
},
114+
});
120115

121-
map.current.on('moveend', () => {
122-
const center = map.current.getCenter();
123-
setDraftCustomizationOptions({
124-
...STYLE_DEFAULTS,
125-
...draftCustomizationOptions,
126-
lng: center.lng,
127-
lat: center.lat,
128-
variant: customizing.internalVariant,
129-
});
130-
setOverlay(map.current, 'default-map');
131-
});
116+
map.current.on('style.load', () => {
117+
map.current.addControl(
118+
new maplibregl.NavigationControl(),
119+
'top-right'
120+
);
121+
installLayers(map.current, 'photos-1940s', {
122+
fadeOverlays: false,
123+
});
124+
setOverlay(map.current, 'default-map');
125+
});
132126

133-
// Add marker for center position
134-
const marker = new maplibregl.Marker({
135-
draggable: false,
136-
color: '#87b6a8',
137-
})
138-
.setLngLat(startingPosition)
139-
.addTo(map.current);
127+
map.current.on('moveend', () => {
128+
const center = map.current.getCenter();
129+
setDraftCustomizationOptions({
130+
...STYLE_DEFAULTS,
131+
...draftCustomizationOptions,
132+
lng: center.lng,
133+
lat: center.lat,
134+
variant: customizing.internalVariant,
135+
});
136+
setOverlay(map.current, 'default-map');
137+
});
140138

141-
map.current.on('move', () => {
142-
marker.setLngLat(map.current.getCenter());
143-
});
139+
// Add marker for center position
140+
const marker = new maplibregl.Marker({
141+
draggable: false,
142+
color: '#87b6a8',
143+
})
144+
.setLngLat(startingPosition)
145+
.addTo(map.current);
146+
147+
map.current.on('move', () => {
148+
marker.setLngLat(map.current.getCenter());
149+
});
150+
})
151+
.catch((error) => {
152+
console.error('Error loading map style:', error);
153+
});
144154
// eslint-disable-next-line react-hooks/exhaustive-deps
145155
}, []);
146156

0 commit comments

Comments
 (0)