35 lines
1 KiB
JavaScript
35 lines
1 KiB
JavaScript
import React from "react";
|
|
import Maplibre from "@maplibre/maplibre-react-native";
|
|
|
|
import { levelNum, numLevel, numMax } from "~/misc/levelNum";
|
|
|
|
const iconStyle = {
|
|
iconImage: ["get", "icon"],
|
|
iconSize: 0.5,
|
|
};
|
|
|
|
export default function AlertSymbolLayer({ level, isDisabled }) {
|
|
const key = `points-${level}${isDisabled ? "-disabled" : ""}`;
|
|
const num = levelNum[level];
|
|
const aboveLevel = numLevel[num + 1];
|
|
const icon = `${level}${isDisabled ? "Disabled" : ""}`;
|
|
|
|
let belowLayerID = null;
|
|
if (aboveLevel) {
|
|
// Maintain level ordering within each group (disabled and non-disabled)
|
|
belowLayerID = `points-${aboveLevel}${isDisabled ? "-disabled" : ""}`;
|
|
} else if (!isDisabled) {
|
|
// If this is the highest non-disabled level (red), put it above the highest disabled level
|
|
belowLayerID = `points-${numLevel[numMax]}-disabled`;
|
|
}
|
|
|
|
return (
|
|
<Maplibre.SymbolLayer
|
|
filter={["==", ["get", "icon"], icon]}
|
|
key={key}
|
|
id={key}
|
|
belowLayerID={belowLayerID}
|
|
style={iconStyle}
|
|
/>
|
|
);
|
|
}
|