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 { Marker, Popup } from "react-leaflet";
import { Marker, Tooltip } from "react-leaflet";
import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
import { Symbol as MilSymbol } from "milsymbol";
@ -25,8 +25,14 @@ export default function ControlPoint(props: ControlPointProps) {
<Marker
position={props.controlPoint.position}
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>
);
}

View File

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