Skip to content

Commit 26669bc

Browse files
jbooleanjboolean
authored
MapLibre for location picker (#1275)
1 parent d264a30 commit 26669bc

File tree

3 files changed

+120
-47
lines changed

3 files changed

+120
-47
lines changed

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

Lines changed: 114 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import round from 'lodash/round';
22
import mapboxgl from 'mapbox-gl';
3+
import * as maplibregl from 'maplibre-gl';
4+
import 'maplibre-gl/dist/maplibre-gl.css';
5+
import { Protocol as PmTilesProtocol } from 'pmtiles';
36
import React from 'react';
47

8+
import { useFeatureFlag } from 'screens/App/shared/stores/FeatureFlagsStore';
9+
import FeatureFlag from 'screens/App/shared/types/FeatureFlag';
10+
511
import useCorrectionsStore, {
612
useCorrectionsStoreComputeds,
713
} from '../stores/CorrectionsStore';
@@ -14,15 +20,24 @@ import {
1420
} from '../../MapPane/components/MainMap/overlays';
1521
import stylesheet from './LocationPickerModal.less';
1622

23+
import mapStyleUrl from 'screens/App/shared/mapStyles/fourties.protomaps.style.json';
24+
1725
const MAPBOX_STYLE = __DEV__
1826
? 'mapbox://styles/julianboilen/ck5jrzrs11r1p1imia7qzjkm1/draft'
1927
: 'mapbox://styles/julianboilen/ck5jrzrs11r1p1imia7qzjkm1';
2028

2129
const DEFAULT_LNG_LAT = [-73.99397, 40.7093] as const;
2230

31+
// Initialize pmtiles protocol for MapLibre
32+
const pmtilesProtocol = new PmTilesProtocol();
33+
if (typeof maplibregl !== 'undefined' && maplibregl.addProtocol) {
34+
maplibregl.addProtocol('pmtiles', pmtilesProtocol.tile);
35+
}
36+
2337
export default function LocationPickerModal(): JSX.Element {
38+
const useMapLibre = useFeatureFlag(FeatureFlag.USE_MAPLIBRE);
2439
const mapContainer = React.useRef<HTMLDivElement>(null);
25-
const map = React.useRef<mapboxgl.Map | null>(null);
40+
const map = React.useRef<mapboxgl.Map | maplibregl.Map | null>(null);
2641
const {
2742
isMapOpen,
2843
closeMap,
@@ -54,50 +69,106 @@ export default function LocationPickerModal(): JSX.Element {
5469
correctedLng ?? previousLng ?? DEFAULT_LNG_LAT[0],
5570
correctedLat ?? previousLat ?? DEFAULT_LNG_LAT[1],
5671
] as [number, number];
57-
map.current = new mapboxgl.Map({
58-
container: mapContainer.current,
59-
style: MAPBOX_STYLE,
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-
});
68-
69-
map.current.on('style.load', () => {
70-
// map.current.removeLayer('photos-1940s');
71-
map.current.setFilter('photos-1940s', [
72-
'!=',
73-
['get', 'photoIdentifier'],
74-
photo.identifier || null,
75-
]);
76-
map.current.removeLayer('photos-1940s-wide-zoom');
77-
78-
map.current.addControl(new mapboxgl.NavigationControl(), 'top-right');
79-
installLayers(map.current, 'photos-1940s', {
80-
fadeOverlays: false,
72+
73+
if (useMapLibre) {
74+
// MapLibre implementation
75+
map.current = new maplibregl.Map({
76+
container: mapContainer.current,
77+
style: mapStyleUrl as unknown as string,
78+
center: startingPosition,
79+
maxBounds: [
80+
[-74.25908989999999, 40.4773991], // SW
81+
[-73.70027209999999, 40.9175771], // NE
82+
],
83+
zoom: 17,
84+
hash: false,
85+
attributionControl: {
86+
compact: false,
87+
},
8188
});
82-
setOverlay(map.current, ['default-map', 'bbl-label']);
83-
});
84-
85-
map.current.on('moveend', () => {
86-
const center = map.current.getCenter();
87-
setCorrectedLngLat(round(center.lng, 6), round(center.lat, 6));
88-
});
89-
90-
// Add marker for center position
91-
const marker = new mapboxgl.Marker({
92-
draggable: false,
93-
color: '#87b6a8',
94-
})
95-
.setLngLat(startingPosition)
96-
.addTo(map.current);
9789

98-
map.current.on('move', () => {
99-
marker.setLngLat(map.current.getCenter());
100-
});
90+
map.current.on('style.load', () => {
91+
map.current.setFilter('photos-1940s', [
92+
'!=',
93+
['get', 'photoIdentifier'],
94+
photo.identifier || null,
95+
]);
96+
97+
(map.current as maplibregl.Map).addControl(
98+
new maplibregl.NavigationControl(),
99+
'top-right'
100+
);
101+
installLayers(map.current, 'photos-1940s', {
102+
fadeOverlays: false,
103+
});
104+
setOverlay(map.current, ['default-map', 'bbl-label']);
105+
});
106+
107+
map.current.on('moveend', () => {
108+
const center = map.current.getCenter();
109+
setCorrectedLngLat(round(center.lng, 6), round(center.lat, 6));
110+
});
111+
112+
// Add marker for center position
113+
const marker = new maplibregl.Marker({
114+
draggable: false,
115+
color: '#87b6a8',
116+
})
117+
.setLngLat(startingPosition)
118+
.addTo(map.current);
119+
120+
map.current.on('move', () => {
121+
marker.setLngLat(map.current.getCenter());
122+
});
123+
} else {
124+
// MapBox implementation
125+
map.current = new mapboxgl.Map({
126+
container: mapContainer.current,
127+
style: MAPBOX_STYLE,
128+
center: startingPosition,
129+
maxBounds: [
130+
[-74.25908989999999, 40.4773991], // SW
131+
[-73.70027209999999, 40.9175771], // NE
132+
],
133+
zoom: 17,
134+
hash: false,
135+
});
136+
137+
map.current.on('style.load', () => {
138+
map.current.setFilter('photos-1940s', [
139+
'!=',
140+
['get', 'photoIdentifier'],
141+
photo.identifier || null,
142+
]);
143+
map.current.removeLayer('photos-1940s-wide-zoom');
144+
145+
(map.current as mapboxgl.Map).addControl(
146+
new mapboxgl.NavigationControl(),
147+
'top-right'
148+
);
149+
installLayers(map.current, 'photos-1940s', {
150+
fadeOverlays: false,
151+
});
152+
setOverlay(map.current, ['default-map', 'bbl-label']);
153+
});
154+
155+
map.current.on('moveend', () => {
156+
const center = map.current.getCenter();
157+
setCorrectedLngLat(round(center.lng, 6), round(center.lat, 6));
158+
});
159+
160+
// Add marker for center position
161+
const marker = new mapboxgl.Marker({
162+
draggable: false,
163+
color: '#87b6a8',
164+
})
165+
.setLngLat(startingPosition)
166+
.addTo(map.current);
167+
168+
map.current.on('move', () => {
169+
marker.setLngLat(map.current.getCenter());
170+
});
171+
}
101172
};
102173

103174
const destroyMap = (): void => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export { OverlayId } from './overlays';
1515
import { RouteComponentProps } from 'react-router';
1616
import stylesheet from './MainMap.less';
1717

18-
import mapStyleUrl from './fourties.protomaps.style.json';
18+
import mapStyleUrl from 'screens/App/shared/mapStyles/fourties.protomaps.style.json';
1919

2020
const PHOTO_LAYER = 'photos-1940s';
2121

‎frontend/src/screens/App/screens/MapPane/components/MainMap/fourties.protomaps.style.json‎ renamed to ‎frontend/src/screens/App/shared/mapStyles/fourties.protomaps.style.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1505,7 +1505,8 @@
15051505
"symbol-placement": "point",
15061506
"text-font": ["News Gothic Std Oblique"],
15071507
"text-field": ["get", "addr_housenumber"],
1508-
"text-size": 12
1508+
"text-size": 12,
1509+
"visibility": "none"
15091510
},
15101511
"paint": {
15111512
"text-color": "#91888b",
@@ -5668,7 +5669,7 @@
56685669
"id": "lot-label",
56695670
"type": "symbol",
56705671
"source": "bbl",
5671-
"source-layer": "MapPLUTO",
5672+
"source-layer": "lots",
56725673
"minzoom": 17,
56735674
"layout": {
56745675
"text-font": ["News Gothic Std Oblique"],
@@ -5688,11 +5689,12 @@
56885689
"id": "block-label",
56895690
"type": "symbol",
56905691
"source": "bbl",
5691-
"source-layer": "MapPLUTO",
5692+
"source-layer": "blocks",
56925693
"minzoom": 13,
56935694
"layout": {
56945695
"text-field": ["concat", "Block ", ["to-string", ["get", "Block"]]],
56955696
"text-offset": [2, 0],
5697+
"text-font": ["News Gothic Std Oblique"],
56965698
"visibility": "none"
56975699
},
56985700
"paint": {

0 commit comments

Comments
 (0)