80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import React, { useEffect } from 'react';
|
|
import mapboxgl from 'mapbox-gl';
|
|
import { manageLayerVisibility } from "@/app/_utils/map/layer-visibility"
|
|
|
|
interface FaultLinesLayerProps {
|
|
map: mapboxgl.Map | null;
|
|
visible?: boolean;
|
|
}
|
|
|
|
export default function FaultLinesLayer({ map, visible = true }: FaultLinesLayerProps) {
|
|
// Define layer IDs for consistent management
|
|
const LAYER_IDS = ['indo-faults-line-layer'];
|
|
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
|
|
// Function to add fault lines layer
|
|
const setupFaultLines = () => {
|
|
const sourceId = 'indo-faults-lines';
|
|
const layerId = 'indo-faults-line-layer';
|
|
|
|
try {
|
|
// Check if the source already exists
|
|
if (!map.getSource(sourceId)) {
|
|
// Add fault lines data source
|
|
const url = "/geojson/indo_faults_lines.geojson";
|
|
map.addSource(sourceId, {
|
|
'type': 'geojson',
|
|
'generateId': true,
|
|
'data': url
|
|
});
|
|
|
|
// Add a line layer to visualize the fault lines
|
|
map.addLayer({
|
|
'id': layerId,
|
|
'type': 'line',
|
|
'source': sourceId,
|
|
'layout': {
|
|
'visibility': visible ? 'visible' : 'none'
|
|
},
|
|
'paint': {
|
|
'line-color': 'red',
|
|
'line-width': 1,
|
|
'line-opacity': 0.5
|
|
}
|
|
});
|
|
}
|
|
|
|
// Use the manageLayerVisibility utility to handle layer visibility
|
|
manageLayerVisibility(map, LAYER_IDS, visible);
|
|
} catch (error) {
|
|
console.warn("Error adding fault lines:", error);
|
|
}
|
|
};
|
|
|
|
// Try to add the layers now or set up listeners for when map is ready
|
|
try {
|
|
if (map.loaded() && map.isStyleLoaded()) {
|
|
setupFaultLines();
|
|
} else {
|
|
// Use multiple events to catch map ready state
|
|
map.once('load', setupFaultLines);
|
|
}
|
|
} catch (error) {
|
|
console.warn("Error setting up fault lines:", error);
|
|
}
|
|
|
|
// Single cleanup function
|
|
return () => {
|
|
if (map) {
|
|
map.off('load', setupFaultLines);
|
|
}
|
|
};
|
|
}, [map, visible]);
|
|
|
|
return null;
|
|
}
|