diff --git a/components/DwifiMap.js b/components/DwifiMap.js index d259f92..ce4bfdd 100644 --- a/components/DwifiMap.js +++ b/components/DwifiMap.js @@ -4,16 +4,46 @@ import 'leaflet/dist/leaflet.css'; import L from 'leaflet'; // Custom icon -const customIcon = new L.Icon({ - iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png', - iconRetinaUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon-2x.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], +const customIcon = new L.DivIcon({ + html: `
+ + + +
`, + className: 'ant-icon', + iconSize: [25, 41], // Twice the original size + iconAnchor: [12, 25], // Adjust anchor to be at the bottom center of the icon + popupAnchor: [1, -34], // Adjust popup position shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png', shadowSize: [41, 41], }); + +// Add this CSS to handle the animation +const style = document.createElement('style'); +style.innerHTML = ` + .custom-marker { + animation: pulse 2s infinite; + color: #1E3A8A; /* Dark blue */ + } + + @keyframes pulse { + 0%, 100% { + transform: scale(0.9); + color: #1E3A8A; /* Dark blue */ + filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); + } + 50% { + transform: scale(1.1); + color: #3B82F6; /* Normal blue */ + filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0)); + } + } +`; +document.head.appendChild(style); + export default function DwifiMap() { const [nodes, setNodes] = useState([]); const socketRef = useRef(null); // Use ref to maintain WebSocket across renders diff --git a/pages/explorer.js b/pages/explorer.js index 014b8c8..352b2c8 100644 --- a/pages/explorer.js +++ b/pages/explorer.js @@ -15,7 +15,7 @@ const Explorer = () => { useEffect(() => { async function fetchNodes() { try { - const response = await fetch(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`); + const response = await fetch(`$https://gateway.erebrus.io/api/v1.0/nodes/all`); const data = await response.json(); if (data && Array.isArray(data.payload)) { setNodes(data.payload);