Fix a few display discrepancies in the new map.

This commit is contained in:
Dan Albert 2022-03-02 23:44:46 -08:00
parent b39a44ae37
commit 781f8fb0e8
2 changed files with 11 additions and 5 deletions

View File

@ -1,5 +1,5 @@
import { Icon, Point } from "leaflet"; import { Icon, Point } from "leaflet";
import { Marker, Popup } from "react-leaflet"; import { Marker, Tooltip } from "react-leaflet";
import { ControlPoint as ControlPointModel } from "../../api/controlpoint"; import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
import { Symbol as MilSymbol } from "milsymbol"; import { Symbol as MilSymbol } from "milsymbol";
@ -25,8 +25,14 @@ export default function ControlPoint(props: ControlPointProps) {
<Marker <Marker
position={props.controlPoint.position} position={props.controlPoint.position}
icon={iconForControlPoint(props.controlPoint)} icon={iconForControlPoint(props.controlPoint)}
// We might draw other markers on top of the CP. The tooltips from the
// other markers are helpful so we want to keep them, but make sure the CP
// is always the clickable thing.
zIndexOffset={1000}
> >
<Popup>{props.controlPoint.name}</Popup> <Tooltip>
<h3 style={{ margin: 0 }}>{props.controlPoint.name}</h3>
</Tooltip>
</Marker> </Marker>
); );
} }

View File

@ -1,5 +1,5 @@
import { Icon, Point } from "leaflet"; import { Icon, Point } from "leaflet";
import { Marker, Popup } from "react-leaflet"; import { Marker, Tooltip } from "react-leaflet";
import { Symbol as MilSymbol } from "milsymbol"; import { Symbol as MilSymbol } from "milsymbol";
import { Tgo as TgoModel } from "../../api/tgo"; import { Tgo as TgoModel } from "../../api/tgo";
@ -22,7 +22,7 @@ interface TgoProps {
export default function Tgo(props: TgoProps) { export default function Tgo(props: TgoProps) {
return ( return (
<Marker position={props.tgo.position} icon={iconForTgo(props.tgo)}> <Marker position={props.tgo.position} icon={iconForTgo(props.tgo)}>
<Popup> <Tooltip>
{`${props.tgo.name} (${props.tgo.control_point_name})`} {`${props.tgo.name} (${props.tgo.control_point_name})`}
<br /> <br />
{props.tgo.units.map((unit) => ( {props.tgo.units.map((unit) => (
@ -31,7 +31,7 @@ export default function Tgo(props: TgoProps) {
<br /> <br />
</> </>
))} ))}
</Popup> </Tooltip>
</Marker> </Marker>
); );
} }