diff --git a/assets/selectedArrow.svg b/assets/selectedArrow.svg
new file mode 100644
index 0000000..8321051
--- /dev/null
+++ b/assets/selectedArrow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/assets/selectedCircle.svg b/assets/selectedCircle.svg
new file mode 100644
index 0000000..debbc9e
--- /dev/null
+++ b/assets/selectedCircle.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/src/components/vesselMarkerOverlay.tsx b/src/components/vesselMarkerOverlay.tsx
index fd01d13..e0d7af4 100644
--- a/src/components/vesselMarkerOverlay.tsx
+++ b/src/components/vesselMarkerOverlay.tsx
@@ -22,7 +22,9 @@ export default function VesselMarkerOverlay({
const [pixiContainer] = useState(new PIXI.Container())
const [overlay] = useState(new SpriteMarkerOverlayHandler(markerOptions, pixiContainer))
const [arrowTexture, setArrowTexture] = useState(null)
+ const [selectedArrowTexture, setSelectedArrowTexture] = useState(null)
const [circleTexture, setCircleTexture] = useState(null)
+ const [selectedCircleTexture, setSelectedCircleTexture] = useState(null)
const { clientHandler } = useAppContext()
const map = useMap()
@@ -31,9 +33,13 @@ export default function VesselMarkerOverlay({
useEffect(() => {
const loadTextures = async () => {
const loadedArrowTexture = await PIXI.Assets.load('assets/arrow.svg')
+ const loadedSelectedArrowTexture = await PIXI.Assets.load('assets/selectedArrow.svg')
const loadedCircleTexture = await PIXI.Assets.load('assets/circle.svg')
+ const loadedSelectedCircleTexture = await PIXI.Assets.load('assets/selectedCircle.svg')
setArrowTexture(loadedArrowTexture)
+ setSelectedArrowTexture(loadedSelectedArrowTexture)
setCircleTexture(loadedCircleTexture)
+ setSelectedCircleTexture(loadedSelectedCircleTexture)
}
loadTextures()
}, [])
@@ -63,7 +69,7 @@ export default function VesselMarkerOverlay({
)
markerOptions.push(
- displayVesselToSpriteMarkerOption(vessel, arrowTexture, circleTexture, selectedVesselmmsi === vessel.simpleVessel.mmsi, onClick)
+ displayVesselToSpriteMarkerOption(vessel, arrowTexture, selectedArrowTexture, circleTexture, selectedCircleTexture, selectedVesselmmsi === vessel.simpleVessel.mmsi, onClick)
)
}
})
@@ -75,7 +81,9 @@ export default function VesselMarkerOverlay({
}
}, [
arrowTexture,
+ selectedArrowTexture,
circleTexture,
+ selectedCircleTexture,
clientHandler,
markerOptions,
monitoredVessels,
@@ -111,7 +119,9 @@ function trustworthinessToColor(trustworthiness?: number): number {
function displayVesselToSpriteMarkerOption(
vessel: DisplayVessel,
arrowTexture: PIXI.Texture,
+ selectedArrowTexture: PIXI.Texture,
circleTexture: PIXI.Texture,
+ selectedCircleTexture: PIXI.Texture,
isSelected: boolean,
onClick: () => void,
): ISpriteMarkerOptions {
@@ -120,12 +130,12 @@ function displayVesselToSpriteMarkerOption(
let sprite: PIXI.Sprite
if (simpleVessel.location.heading !== undefined) {
- sprite = new PIXI.Sprite(arrowTexture)
+ sprite = new PIXI.Sprite(isSelected ? selectedArrowTexture : arrowTexture)
sprite.anchor.set(0.5, 0.5)
sprite.rotation =
Math.PI / 2 + (simpleVessel.location.heading ? (simpleVessel.location.heading * Math.PI) / 180 : 0)
} else {
- sprite = new PIXI.Sprite(circleTexture)
+ sprite = new PIXI.Sprite(isSelected ? selectedCircleTexture : circleTexture)
sprite.anchor.set(0.5, 0.5)
}
@@ -136,16 +146,12 @@ function displayVesselToSpriteMarkerOption(
sprite.tint = 0x000000
}
- if (isSelected) {
- sprite.alpha = 1
- sprite.tint = 0x1d4ed8
- }
-
sprite.eventMode = 'dynamic'
sprite.cursor = 'pointer'
sprite.on('click', onClick)
+ const size = isSelected ? 20 : 13
const position: L.LatLngTuple = [simpleVessel.location.point.lat, simpleVessel.location.point.lon]
- return { sprite, position, size: 12 }
+ return { sprite, position, size }
}