Skip to content

Commit 613841e

Browse files
e-halinenahjyrkia
e-halinen
and
ahjyrkia
authored
Merge maplibre-gl-js and fixes to prod (#137)
* 25226: react-map-gl switched to maplibre-gl (#130) * react-map-gl switched to maplibre-gl * lint fixes * more lint errors fixed * zoneSymbols bit more responsive * build and style fix * yarn.lock update * AB#28974: Represent zone symbols correctly in UI in regards to prints * zone symbol sizing * lint fixes * resize symbols on all zoom events * Bump hsl-map-style version to 1.1.3 (#133) * AB#35806: Fix crashing coordinate input fields (#134) * AB#48634: Bump hsl-map-style to 1.2.0 (#135) * WIP: AB#34322: Fix marker glitching when dragging stops (#136) --------- Co-authored-by: Anton Jyrkiäinen <anton.jyrkiainen@helsinki.fi>
1 parent d7ff0c1 commit 613841e

16 files changed

Lines changed: 417 additions & 215 deletions

‎app/actions/viewport.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ export function updateViewport(viewport) {
88
}
99

1010
export function updateSymbol(symbol, e) {
11-
const newSymbol = symbol;
12-
newSymbol._root.entries[0] = ["latitude", +e.lngLat[1].toFixed(6)];
13-
newSymbol._root.entries[1] = ["longitude", +e.lngLat[0].toFixed(6)];
11+
const newSymbol = symbol
12+
.set("latitude", +e.lat.toFixed(6))
13+
.set("longitude", +e.lng.toFixed(6));
14+
1415
return {
1516
type: "UPDATE_SYMBOL",
16-
symbol
17+
symbol: newSymbol
1718
};
1819
}
1920

‎app/components/CenterMarker.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎app/components/CenterSelector.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from "react";
2+
import {List} from "immutable";
23
import DropdownSelector from "./DropdownSelector";
34
import styles from "./DropdownSelector.css";
45

@@ -25,12 +26,12 @@ const CenterSelector = ({center, toggleTab, selected, updateCenter}) => {
2526
data-cy="manual-coords-lng-selector-input"
2627
onChange={(event) => {
2728
if (validateCoordInput(event.target.value)) {
28-
updateCenter({
29-
lngLat: [
29+
updateCenter(
30+
List([
3031
center.get(0),
3132
Number(event.target.value)
32-
]
33-
});
33+
])
34+
);
3435
}
3536
}}
3637
/>
@@ -43,12 +44,12 @@ const CenterSelector = ({center, toggleTab, selected, updateCenter}) => {
4344
data-cy="manual-coords-lat-selector-input"
4445
onChange={(event) => {
4546
if (validateCoordInput(event.target.value)) {
46-
updateCenter({
47-
lngLat: [
47+
updateCenter(
48+
List([
4849
Number(event.target.value),
4950
center.get(1)
50-
]
51-
});
51+
])
52+
);
5253
}
5354
}}
5455
/>

‎app/components/Map.js‎

Lines changed: 56 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,75 @@
11
import PropTypes from "prop-types";
2-
import React from "react";
3-
import MapGL, {Marker} from "react-map-gl";
4-
import CenterMarker from "../containers/CenterMarker";
5-
import SelectionWindow from "../containers/SelectionWindow";
6-
import DebugOverlay from "../containers/DebugOverlay";
7-
import Spinner from "../containers/Spinner";
8-
9-
import AZone from "../icons/icon-Zone-A";
10-
import BZone from "../icons/icon-Zone-B";
11-
import CZone from "../icons/icon-Zone-C";
12-
import DZone from "../icons/icon-Zone-D";
13-
14-
// Same scaling used in backend for sizing the posters.
15-
const SCALE = 96 / 72;
16-
17-
const getZoneIcon = (zone, svgSize) => {
18-
switch (zone) {
19-
case "A":
20-
return <AZone size={svgSize} />;
21-
case "B":
22-
return <BZone size={svgSize} />;
23-
case "C":
24-
return <CZone size={svgSize} />;
25-
case "D":
26-
return <DZone size={svgSize} />;
27-
default:
28-
return <div />;
29-
}
30-
};
31-
32-
const getSymbolSize = (symbolSize, mapWidth, mapHeight, mapSelectionSize) => {
33-
if (!mapSelectionSize) return 0;
34-
const symbolSizeNum = parseInt(symbolSize.replace("px", ""), 10);
35-
const mapSizeDiameter = (mapWidth + mapHeight) / 2;
36-
const symbolToMapRatio = mapSizeDiameter / symbolSizeNum;
37-
const mapSelectionSizeDiameter =
38-
(mapSelectionSize[0] + mapSelectionSize[1]) / 2;
39-
40-
return (mapSelectionSizeDiameter / symbolToMapRatio) * SCALE;
41-
};
2+
import React, {useEffect, useRef, useState} from "react";
3+
import maplibregl from "maplibre-gl";
4+
import ZoneSymbolMarkers from "./ZoneSymbolMarkers";
5+
import SelectionMarker from "../containers/SelectionMarker";
426

437
const MapComponent = ({
448
viewport,
459
updateViewport,
4610
style,
47-
mapWidth,
48-
mapHeight,
4911
zoneSymbols,
5012
updateSymbol,
5113
showZoneSymbols,
5214
symbolSize,
53-
mapSelectionSize
15+
mapSelectionSize,
16+
mapSelection
5417
}) => {
55-
const svgSize = getSymbolSize(
56-
symbolSize,
57-
mapWidth,
58-
mapHeight,
59-
mapSelectionSize
60-
);
18+
const mapContainerRef = useRef(null);
19+
const [map, setMap] = useState(null);
20+
useEffect(() => {
21+
const newMap = new maplibregl.Map({
22+
container: mapContainerRef.current,
23+
style,
24+
center: [viewport.longitude, viewport.latitude],
25+
zoom: viewport.zoom
26+
});
27+
28+
setMap(newMap);
29+
30+
return () => newMap.remove();
31+
}, []);
32+
33+
useEffect(() => {
34+
if (!map) {
35+
return () => {};
36+
}
37+
38+
const onChange = () => {
39+
updateViewport({
40+
longitude: map.getCenter().lng,
41+
latitude: map.getCenter().lat,
42+
zoom: map.getZoom()
43+
});
44+
};
45+
46+
map.on("zoomend", onChange);
47+
map.on("moveend", onChange);
48+
49+
return () => {
50+
map.off("zoomend", onChange);
51+
map.off("moveend", onChange);
52+
};
53+
}, [map]);
6154
return (
62-
<div>
63-
<MapGL
64-
{...viewport}
65-
width={mapWidth}
66-
height={mapHeight}
67-
mapStyle={style}
68-
onViewportChange={updateViewport}>
69-
<SelectionWindow
70-
viewport={viewport}
71-
width={mapWidth}
72-
height={mapHeight}
73-
/>
74-
<DebugOverlay
75-
viewport={viewport}
76-
width={mapWidth}
77-
height={mapHeight}
55+
<div ref={mapContainerRef} style={{width: "100%", height: "100%"}}>
56+
<SelectionMarker
57+
map={map}
58+
center={[viewport.longitude, viewport.latitude]}
59+
mapSelectionSize={mapSelectionSize}
60+
/>
61+
{showZoneSymbols && (
62+
<ZoneSymbolMarkers
63+
map={map}
64+
zoneSymbols={zoneSymbols}
65+
updateSymbol={updateSymbol}
66+
symbolSize={symbolSize}
67+
mapSelection={mapSelection}
7868
/>
79-
<CenterMarker
80-
viewport={viewport}
81-
width={mapWidth}
82-
height={mapHeight}
83-
/>
84-
{showZoneSymbols &&
85-
zoneSymbols.map((symbol) => {
86-
return (
87-
<Marker
88-
key={symbol.get("id")}
89-
draggable={true}
90-
latitude={symbol.get("latitude")}
91-
longitude={symbol.get("longitude")}
92-
onDrag={(e) => {
93-
updateSymbol(symbol, e);
94-
}}>
95-
<div>
96-
{getZoneIcon(symbol.get("zone"), svgSize)}
97-
</div>
98-
</Marker>
99-
);
100-
})}
101-
</MapGL>
102-
<Spinner width={mapWidth} height={mapHeight} />
69+
)}
10370
</div>
10471
);
10572
};
106-
10773
MapComponent.propTypes = {
10874
viewport: PropTypes.shape({
10975
latitude: PropTypes.number.isRequired,

‎app/components/Marker.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
height: 20px;
55
border-radius: 50%;
66
border-width: 2px;
7-
border-color: #D91153;
7+
border-color: #d91153;
88
border-style: solid;
99
padding: 3px;
1010
}
1111

1212
.markerDot {
13-
background: #D91153;
13+
background: #d91153;
1414
width: 100%;
1515
height: 100%;
1616
border-radius: 50%;

0 commit comments

Comments
 (0)