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);