Fix map view on node details

This commit is contained in:
Daniel Pupius
2025-04-25 10:27:44 -07:00
parent 5b5dad7a68
commit acaeeaf495
6 changed files with 86 additions and 15 deletions

View File

@@ -155,9 +155,6 @@ func (s *Server) handleStream(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "event: padding\ndata: %s\n\n", padding)
flusher.Flush()
// Log that we sent the large initial message
logger.Debug("Sent large initial message to force buffer flush")
// Stream messages to the client
for {
select {
@@ -204,8 +201,6 @@ func (s *Server) handleStream(w http.ResponseWriter, r *http.Request) {
return
}
logger.Info("Sending packet to client", "packetID", packet.Data.Id)
// Send the event
fmt.Fprintf(w, "event: message\ndata: %s\n\n", data)
flusher.Flush()

View File

@@ -5,5 +5,9 @@
VITE_API_BASE_URL="http://localhost:8080"
VITE_APP_ENV="development"
# Application customization
VITE_SITE_TITLE="ERSN Mesh"
VITE_SITE_DESCRIPTION="Meshtastic activity in the Ebbett's Pass region of Highway 4, CA."
# Get one at: https://developers.google.com/maps/documentation/javascript/get-api-key
VITE_GOOGLE_MAPS_API_KEY=OVERRIDE_IN_LOCAL_ENV

View File

@@ -4,12 +4,14 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="ERSN Mesh :: Meshtastic activity in the Ebbett's Pass region of Highway 4, CA." />
<title>ERSN Mesh</title>
<meta name="description" content="%VITE_SITE_DESCRIPTION%" />
<title>%VITE_SITE_TITLE%</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet">
<!-- Google Maps API with environment variable API key -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=%VITE_GOOGLE_MAPS_API_KEY%"></script>
</head>
<body>

View File

@@ -13,7 +13,7 @@ interface NodeDetailProps {
nodeId: number;
}
// Google Maps API is already loaded - this creates a map component
// Google Maps component that uses the API loaded via script tag
const GoogleMap: React.FC<{lat: number, lng: number, zoom?: number}> = ({lat, lng, zoom = 14}) => {
const mapRef = useRef<HTMLDivElement>(null);
const mapInstanceRef = useRef<google.maps.Map | null>(null);
@@ -104,7 +104,6 @@ const GoogleMap: React.FC<{lat: number, lng: number, zoom?: number}> = ({lat, ln
radius: 300 // 300m accuracy as default
});
}
}
}, [lat, lng, zoom]);

View File

@@ -5,20 +5,23 @@
// Environment type
export const IS_DEV = import.meta.env.DEV;
export const IS_PROD = import.meta.env.PROD;
export const APP_ENV = import.meta.env.VITE_APP_ENV || 'development';
export const APP_ENV = import.meta.env.VITE_APP_ENV || "development";
// Site configuration
export const SITE_TITLE = import.meta.env.VITE_SITE_TITLE || 'ERSN Mesh';
export const SITE_TITLE = import.meta.env.VITE_SITE_TITLE || "My Mesh";
export const SITE_DESCRIPTION =
import.meta.env.VITE_SITE_DESCRIPTION ||
"Realtime Meshtastic activity via MQTT.";
// API URL configuration
const getApiBaseUrl = (): string => {
// In production, use the same domain (empty string base URL)
if (IS_PROD) {
return import.meta.env.VITE_API_BASE_URL || '';
return import.meta.env.VITE_API_BASE_URL || "";
}
// In development, use the configured base URL with fallback
return import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
return import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
};
export const API_BASE_URL = getApiBaseUrl();
@@ -26,4 +29,4 @@ export const API_BASE_URL = getApiBaseUrl();
// API endpoints
export const API_ENDPOINTS = {
STREAM: `${API_BASE_URL}/api/stream`,
};
};

68
web/src/types/google-maps.d.ts vendored Normal file
View File

@@ -0,0 +1,68 @@
// Type definitions for Google Maps JavaScript API
declare namespace google {
namespace maps {
class Map {
constructor(
mapDiv: Element,
opts?: MapOptions
);
}
class Marker {
constructor(opts?: MarkerOptions);
}
class Circle {
constructor(opts?: CircleOptions);
}
interface MapOptions {
center?: { lat: number; lng: number };
zoom?: number;
mapTypeId?: string;
mapTypeControl?: boolean;
streetViewControl?: boolean;
fullscreenControl?: boolean;
zoomControl?: boolean;
styles?: Array<any>;
}
interface MarkerOptions {
position?: { lat: number; lng: number };
map?: Map;
title?: string;
icon?: any;
}
interface CircleOptions {
strokeColor?: string;
strokeOpacity?: number;
strokeWeight?: number;
fillColor?: string;
fillOpacity?: number;
map?: Map;
center?: { lat: number; lng: number };
radius?: number;
}
const MapTypeId: {
ROADMAP: string;
SATELLITE: string;
HYBRID: string;
TERRAIN: string;
};
const SymbolPath: {
CIRCLE: number;
FORWARD_CLOSED_ARROW: number;
FORWARD_OPEN_ARROW: number;
BACKWARD_CLOSED_ARROW: number;
BACKWARD_OPEN_ARROW: number;
};
}
}
// Extend the Window interface
interface Window {
google: typeof google;
}