globle files

assets/globe.css

@@ -0,0 +1,6 @@
+/* assets/globe.css */
+#map {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+}

assets/globe.js

@@ -0,0 +1,184 @@
+/* assets/globe.js */
+const GLOBE_DEFAULTS = {
+  style: "https://tiles.openfreemap.org/styles/liberty",
+  center: [0, 20],
+  zoom: 1.5,
+  minZoom: 0,
+  maxZoom: 22,
+  bearing: 0,
+  pitch: 0,
+  minPitch: 0,
+  maxPitch: 85,
+  projection: "globe",
+  attributionControl: true,
+  scrollZoom: true,
+  dragRotate: true,
+  dragPan: true,
+  keyboard: true,
+  doubleClickZoom: true,
+  touchZoomRotate: true,
+  interactive: true,
+  showGeolocateControl: true,
+  useCurrentLocation: false,
+  geolocateZoom: 10,
+  trackUserLocation: false,
+  showUserLocation: true,
+  showAccuracyCircle: true,
+};
+
+function parseBool(value, fallback) {
+  if (value === undefined) return fallback;
+  return value === "true" || value === "1";
+}
+
+function parseNumber(value, fallback) {
+  if (value === undefined || value === "") return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+function parseCenter(value, fallback) {
+  if (!value) return fallback;
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed) && parsed.length === 2) return parsed;
+  } catch {
+    const parts = value.split(",").map((s) => Number(s.trim()));
+    if (parts.length === 2 && parts.every(Number.isFinite)) return parts;
+  }
+  return fallback;
+}
+
+function readOptionsFromElement(el) {
+  const d = el.dataset;
+  return {
+    style: d.style,
+    center: parseCenter(d.center, undefined),
+    zoom: parseNumber(d.zoom, undefined),
+    minZoom: parseNumber(d.minZoom, undefined),
+    maxZoom: parseNumber(d.maxZoom, undefined),
+    bearing: parseNumber(d.bearing, undefined),
+    pitch: parseNumber(d.pitch, undefined),
+    minPitch: parseNumber(d.minPitch, undefined),
+    maxPitch: parseNumber(d.maxPitch, undefined),
+    projection: d.projection,
+    attributionControl: parseBool(d.attributionControl, undefined),
+    scrollZoom: parseBool(d.scrollZoom, undefined),
+    dragRotate: parseBool(d.dragRotate, undefined),
+    dragPan: parseBool(d.dragPan, undefined),
+    keyboard: parseBool(d.keyboard, undefined),
+    doubleClickZoom: parseBool(d.doubleClickZoom, undefined),
+    touchZoomRotate: parseBool(d.touchZoomRotate, undefined),
+    interactive: parseBool(d.interactive, undefined),
+    showGeolocateControl: parseBool(d.showGeolocateControl, undefined),
+    useCurrentLocation: parseBool(d.useCurrentLocation, undefined),
+    geolocateZoom: parseNumber(d.geolocateZoom, undefined),
+    trackUserLocation: parseBool(d.trackUserLocation, undefined),
+    showUserLocation: parseBool(d.showUserLocation, undefined),
+    showAccuracyCircle: parseBool(d.showAccuracyCircle, undefined),
+  };
+}
+
+function mergeGlobeOptions(...sources) {
+  const merged = { ...GLOBE_DEFAULTS };
+  for (const source of sources) {
+    if (!source) continue;
+    for (const [key, value] of Object.entries(source)) {
+      if (value !== undefined) merged[key] = value;
+    }
+  }
+  return merged;
+}
+
+function initGlobe(options = {}) {
+  if (typeof maplibregl === "undefined") {
+    setTimeout(() => initGlobe(options), 50);
+    return;
+  }
+
+  const container = element.querySelector("#map");
+  if (!container || container.dataset.mapInit) return;
+  container.dataset.mapInit = "1";
+
+  const opts = mergeGlobeOptions(readOptionsFromElement(container), options);
+  const {
+    projection,
+    attributionControl,
+    scrollZoom,
+    dragRotate,
+    dragPan,
+    keyboard,
+    doubleClickZoom,
+    touchZoomRotate,
+    interactive,
+    showGeolocateControl,
+    useCurrentLocation,
+    geolocateZoom,
+    trackUserLocation,
+    showUserLocation,
+    showAccuracyCircle,
+    ...mapOptions
+  } = opts;
+
+  const map = new maplibregl.Map({
+    container,
+    attributionControl,
+    scrollZoom,
+    dragRotate,
+    dragPan,
+    keyboard,
+    doubleClickZoom,
+    touchZoomRotate,
+    interactive,
+    ...mapOptions,
+  });
+
+  let geolocateControl = null;
+
+  if (showGeolocateControl) {
+    geolocateControl = new maplibregl.GeolocateControl({
+      positionOptions: { enableHighAccuracy: true },
+      trackUserLocation,
+      showUserLocation,
+      showAccuracyCircle,
+    });
+    map.addControl(geolocateControl, "top-right");
+  }
+
+  function flyToCurrentLocation() {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        map.flyTo({
+          center: [pos.coords.longitude, pos.coords.latitude],
+          zoom: geolocateZoom,
+          essential: true,
+        });
+      },
+      (err) => console.warn("Geolocation failed:", err.message),
+      { enableHighAccuracy: true }
+    );
+  }
+
+  map.on("style.load", () => {
+    map.setProjection({ type: projection });
+    map.resize();
+  });
+
+  map.on("load", () => {
+    map.resize();
+    if (useCurrentLocation) {
+      if (geolocateControl) {
+        geolocateControl.trigger();
+      } else {
+        flyToCurrentLocation();
+      }
+    }
+  });
+
+  window.addEventListener("resize", () => map.resize());
+
+  return map;
+}
+
+initGlobe();

assets/globe_head.html

@@ -0,0 +1,6 @@
+<!-- assets/globe_head.html -->
+<link
+  href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css"
+  rel="stylesheet"
+/>
+<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>

ui/globe.py

@@ -0,0 +1,135 @@
+# ui/globe.py
+import json
+from pathlib import Path
+
+import gradio as gr
+
+ASSETS_DIR = Path(__file__).resolve().parent.parent / "assets"
+
+
+def _read_asset(name: str) -> str:
+    return (ASSETS_DIR / name).read_text(encoding="utf-8")
+
+
+def _map_data_attrs(
+    *,
+    style: str = "https://tiles.openfreemap.org/styles/liberty",
+    center: tuple[float, float] = (0.0, 20.0),
+    zoom: float = 1.5,
+    min_zoom: float = 0.0,
+    max_zoom: float = 22.0,
+    bearing: float = 0.0,
+    pitch: float = 0.0,
+    min_pitch: float = 0.0,
+    max_pitch: float = 85.0,
+    projection: str = "globe",
+    attribution_control: bool = True,
+    scroll_zoom: bool = True,
+    drag_rotate: bool = True,
+    drag_pan: bool = True,
+    keyboard: bool = True,
+    double_click_zoom: bool = True,
+    touch_zoom_rotate: bool = True,
+    interactive: bool = True,
+    show_geolocate_control: bool = True,
+    use_current_location: bool = False,
+    geolocate_zoom: float = 10.0,
+    track_user_location: bool = False,
+    show_user_location: bool = True,
+    show_accuracy_circle: bool = True,
+) -> str:
+    attrs = {
+        "data-style": style,
+        "data-center": json.dumps(list(center)),
+        "data-zoom": zoom,
+        "data-min-zoom": min_zoom,
+        "data-max-zoom": max_zoom,
+        "data-bearing": bearing,
+        "data-pitch": pitch,
+        "data-min-pitch": min_pitch,
+        "data-max-pitch": max_pitch,
+        "data-projection": projection,
+        "data-attribution-control": str(attribution_control).lower(),
+        "data-scroll-zoom": str(scroll_zoom).lower(),
+        "data-drag-rotate": str(drag_rotate).lower(),
+        "data-drag-pan": str(drag_pan).lower(),
+        "data-keyboard": str(keyboard).lower(),
+        "data-double-click-zoom": str(double_click_zoom).lower(),
+        "data-touch-zoom-rotate": str(touch_zoom_rotate).lower(),
+        "data-interactive": str(interactive).lower(),
+        "data-show-geolocate-control": str(show_geolocate_control).lower(),
+        "data-use-current-location": str(use_current_location).lower(),
+        "data-geolocate-zoom": geolocate_zoom,
+        "data-track-user-location": str(track_user_location).lower(),
+        "data-show-user-location": str(show_user_location).lower(),
+        "data-show-accuracy-circle": str(show_accuracy_circle).lower(),
+    }
+    return " ".join(f'{key}="{value}"' for key, value in attrs.items())
+
+
+def render_globe_panel(
+    *,
+    style: str = "https://tiles.openfreemap.org/styles/liberty",
+    center: tuple[float, float] = (0.0, 20.0),
+    zoom: float = 1.5,
+    min_zoom: float = 0.0,
+    max_zoom: float = 22.0,
+    bearing: float = 0.0,
+    pitch: float = 0.0,
+    min_pitch: float = 0.0,
+    max_pitch: float = 85.0,
+    projection: str = "globe",
+    attribution_control: bool = True,
+    scroll_zoom: bool = True,
+    drag_rotate: bool = True,
+    drag_pan: bool = True,
+    keyboard: bool = True,
+    double_click_zoom: bool = True,
+    touch_zoom_rotate: bool = True,
+    interactive: bool = True,
+    show_geolocate_control: bool = True,
+    use_current_location: bool = False,
+    geolocate_zoom: float = 10.0,
+    track_user_location: bool = False,
+    show_user_location: bool = True,
+    show_accuracy_circle: bool = True,
+):
+    data_attrs = _map_data_attrs(
+        style=style,
+        center=center,
+        zoom=zoom,
+        min_zoom=min_zoom,
+        max_zoom=max_zoom,
+        bearing=bearing,
+        pitch=pitch,
+        min_pitch=min_pitch,
+        max_pitch=max_pitch,
+        projection=projection,
+        attribution_control=attribution_control,
+        scroll_zoom=scroll_zoom,
+        drag_rotate=drag_rotate,
+        drag_pan=drag_pan,
+        keyboard=keyboard,
+        double_click_zoom=double_click_zoom,
+        touch_zoom_rotate=touch_zoom_rotate,
+        interactive=interactive,
+        show_geolocate_control=show_geolocate_control,
+        use_current_location=use_current_location,
+        geolocate_zoom=geolocate_zoom,
+        track_user_location=track_user_location,
+        show_user_location=show_user_location,
+        show_accuracy_circle=show_accuracy_circle,
+    )
+    return gr.HTML(
+        value=f'<div id="map" {data_attrs}></div>',
+        head=_read_asset("globe_head.html"),
+        css_template=_read_asset("globe.css"),
+        html_template="${value}",
+        js_on_load=_read_asset("globe.js"),
+        min_height="100vh",
+        show_label=False,
+        container=False,
+        padding=False,
+        scale=1,
+        elem_classes=["globe-panel"],
+    )