118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import React, { useEffect } from 'react';
|
|
import mapboxgl from 'mapbox-gl';
|
|
|
|
interface FaultLinesLayerProps {
|
|
map: mapboxgl.Map | null;
|
|
visible?: boolean;
|
|
}
|
|
|
|
export default function FaultLinesLayer({ map, visible = true }: FaultLinesLayerProps) {
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
|
|
// Function to add fault lines layer
|
|
function addFaultLines() {
|
|
const sourceId = 'indo_faults_lines';
|
|
const layerId = 'indo_faults_line_layer';
|
|
|
|
// Make sure map is defined
|
|
if (!map) return;
|
|
|
|
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
|
|
}
|
|
});
|
|
} else if (map.getLayer(layerId)) {
|
|
// If the layer exists, just update its visibility
|
|
map.setLayoutProperty(
|
|
layerId,
|
|
'visibility',
|
|
visible ? 'visible' : 'none'
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.warn("Error adding fault lines:", error);
|
|
}
|
|
}
|
|
|
|
// Function to clean up layers
|
|
function cleanupFaultLines() {
|
|
try {
|
|
if (!map || !map.getStyle()) return;
|
|
|
|
const layerId = 'indo_faults_line_layer';
|
|
const sourceId = 'indo_faults_lines';
|
|
|
|
if (map.getLayer(layerId)) {
|
|
map.removeLayer(layerId);
|
|
}
|
|
|
|
if (map.getSource(sourceId)) {
|
|
map.removeSource(sourceId);
|
|
}
|
|
} catch (error) {
|
|
console.warn("Error cleaning up fault lines:", error);
|
|
}
|
|
}
|
|
|
|
let timeoutId: NodeJS.Timeout | undefined;
|
|
|
|
// Try to add the layers now or set up listeners for when map is ready
|
|
try {
|
|
if (map.loaded() && map.isStyleLoaded()) {
|
|
addFaultLines();
|
|
} else {
|
|
// Use multiple events to catch map ready state
|
|
map.on('load', addFaultLines);
|
|
map.on('style.load', addFaultLines);
|
|
map.on('styledata', addFaultLines);
|
|
|
|
// Fallback timeout
|
|
timeoutId = setTimeout(() => {
|
|
addFaultLines();
|
|
}, 2000);
|
|
}
|
|
} catch (error) {
|
|
console.warn("Error setting up fault lines:", error);
|
|
}
|
|
|
|
// Single cleanup function
|
|
return () => {
|
|
if (timeoutId) clearTimeout(timeoutId);
|
|
|
|
if (map) {
|
|
map.off('load', addFaultLines);
|
|
map.off('style.load', addFaultLines);
|
|
map.off('styledata', addFaultLines);
|
|
}
|
|
|
|
cleanupFaultLines();
|
|
};
|
|
}, [map, visible]);
|
|
|
|
return null;
|
|
}
|