Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explorer: add animation to map ; update dvpn api url #118

Merged
merged 2 commits into from
Aug 28, 2024
Merged

Explorer: add animation to map ; update dvpn api url #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d1c60a
DwifiMap : Animation added
vaibhavvvvv Aug 28, 2024
cb8d1f7
Explorer DVPN: api url updated
vaibhavvvvv Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 36 additions & 6 deletions components/DwifiMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: `<div class="custom-marker">
<span class="anticon anticon-environment">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="environment" width="2em" height="2em" fill="currentColor" aria-hidden="true">
<path d="M512 64C324.3 64 176 208.6 176 384c0 237 300.6 526.2 318.7 543.1a31.99 31.99 0 0045.4 0C547.4 910.2 848 621 848 384 848 208.6 699.7 64 512 64zm0 484c-70.7 0-128-57.3-128-128s57.3-128 128-128 128 57.3 128 128-57.3 128-128 128z"></path>
</svg>
</span>
</div>`,
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
Expand Down
2 changes: 1 addition & 1 deletion pages/explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down