sarlink/mapmaker
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

infor annotations

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2025-12-13 14:09:20 +05:00
parent 4b0722787e
commit 378a8727e2
6 changed files with 87 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/src/components/map/MapItemsLayer.tsx
View File

@@ -86,6 +86,19 @@ const outdoorApIcon = new L.DivIcon({
iconAnchor: [20, 40],
});
const infoIcon = new L.DivIcon({
html: `<div class="info-marker-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/>
<path d="M12 16v-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
<circle cx="12" cy="8" r="1.2"/>
</svg>
</div>`,
className: 'custom-info-marker',
iconSize: [20, 20],
iconAnchor: [10, 20],
});
export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapItemsLayerProps) {
const [items, setItems] = useState<MapItem[]>([]);
const [loading, setLoading] = useState(true);
@@ -137,6 +150,8 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
return indoorApIcon;
case 'outdoor_ap':
return outdoorApIcon;
case 'info':
return infoIcon;
default:
return undefined;
}
@@ -343,9 +358,9 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
);
}
// Render devices
// Render devices and info markers
if (
['switch', 'indoor_ap', 'outdoor_ap'].includes(item.type) &&
['switch', 'indoor_ap', 'outdoor_ap', 'info'].includes(item.type) &&
item.geometry.type === 'Point'
) {
const [lng, lat] = item.geometry.coordinates;
@@ -373,7 +388,9 @@ export function MapItemsLayer({ mapId, refreshTrigger, readOnly = false }: MapIt
<Popup>
<div className="text-sm dark:bg-gray-800 dark:text-white" style={{ minWidth: '200px' }}>
<div className="font-semibold text-gray-900 dark:text-white">{item.properties.name || item.type}</div>
<div className="text-gray-600 dark:text-gray-400">Type: {item.type}</div>
{item.type !== 'info' && (
<div className="text-gray-600 dark:text-gray-400">Type: {item.type}</div>
)}
{item.properties.port_count && (
<div className="text-gray-600 dark:text-gray-400">
Ports: {item.properties.connections?.length || 0} / {item.properties.port_count}