Show info box for selected feature in geoman by giswqs · Pull Request #132 · opengeos/anymap

giswqs · 2025-11-20T02:20:06Z

No description provided.

github-actions · 2025-11-20T02:21:26Z

🚀 Deployed on https://691e7e9b468e48500a7a2680--opengeos.netlify.app

Copilot

Pull Request Overview

This PR adds an optional info box feature to the Geoman control that displays feature properties when users interact with map features. The implementation provides configurable display modes (click or hover) and adjustable hit-testing tolerance.

Key Changes:

Added three new parameters to add_geoman_control(): show_info_box, info_box_mode, and info_box_tolerance
Implemented JavaScript info box UI with automatic feature detection using geometry hit-testing algorithms
Added runtime control via new set_geoman_info_box_enabled() method

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 21 comments.

File	Description
anymap/maplibre.py	Added Python API with three new parameters for info box configuration and a runtime control method
anymap/static/maplibre_widget.js	Implemented info box UI, early fallback mechanism, geometry hit-testing algorithms, and event handling for click/hover modes

Comments suppressed due to low confidence (1)

anymap/maplibre.py:2772

'except' clause does nothing but pass and there is no explanatory comment.

            except Exception:

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-20T02:27:19Z

+              const showEarly = (props) => {
+                const box = ensureEarlyBox();
+                if (!box) return;
+                const content = box.querySelector('.gm-info-box-content');
+                if (content) {
+                  content.innerHTML = '';
+                  const entries = Object.entries(props || {});
+                  if (entries.length === 0) {
+                    const none = document.createElement('div');
+                    none.textContent = 'No properties';
+                    content.appendChild(none);
+                  } else {
+                    const list = document.createElement('div');
+                    entries.slice(0, 16).forEach(([k, v]) => {
+                      const row = document.createElement('div');
+                      const kEl = document.createElement('span');
+                      kEl.style.color = '#555';
+                      kEl.textContent = `${k}: `;
+                      const vEl = document.createElement('span');
+                      vEl.style.color = '#111';
+                      try { vEl.textContent = typeof v === 'object' ? JSON.stringify(v) : String(v); }
+                      catch (_e) { vEl.textContent = String(v); }
+                      row.appendChild(kEl); row.appendChild(vEl); list.appendChild(row);
+                    });
+                    if (entries.length > 16) {
+                      const more = document.createElement('div');
+                      more.style.color = '#777';
+                      more.style.marginTop = '4px';
+                      more.textContent = `(+${entries.length - 16} more)`;
+                      list.appendChild(more);
+                    }
+                    content.appendChild(list);
+                  }
+                }
+                box.style.display = 'block';
+              };


The property rendering logic is duplicated between the early fallback (lines 4063-4098) and the main implementation (lines 4261-4301). Both blocks iterate over properties, create the same DOM elements, and apply identical truncation logic (16 properties max). This duplication makes maintenance error-prone. Consider extracting this into a reusable function.

Copilot · 2025-11-20T02:27:19Z

+              const earlyLookup = (lngLat) => {
+                try {
+                  const data = model.get('geoman_data') || { type: 'FeatureCollection', features: [] };
+                  const features = Array.isArray(data.features) ? data.features : [];
+                  if (!features.length) return null;
+                  const pt = map.project([lngLat.lng, lngLat.lat]);
+                  const tol = Number.isFinite(el._gmInfoTolerance) ? Math.max(1, Number(el._gmInfoTolerance)) : 8;
+                  const threshold2 = tol * tol;
+                  let best = null;
+                  let bestScore = Infinity;
+                  for (const f of features) {
+                    if (!f || !f.geometry) continue;
+                    const g = f.geometry;
+                    if (g.type === 'Point') {
+                      const p = map.project(g.coordinates);
+                      const d2 = dist2(pt, p);
+                      if (d2 <= threshold2 && d2 < bestScore) { best = f.properties || {}; bestScore = d2; }
+                    } else if (g.type === 'MultiPoint') {
+                      for (const c of g.coordinates || []) {
+                        const p = map.project(c);
+                        const d2 = dist2(pt, p);
+                        if (d2 <= threshold2 && d2 < bestScore) { best = f.properties || {}; bestScore = d2; }
+                      }
+                    } else if (g.type === 'LineString') {
+                      const coords = g.coordinates || [];
+                      for (let i = 1; i < coords.length; i++) {
+                        const a = map.project(coords[i - 1]), b = map.project(coords[i]);
+                        const d2 = distToSegment2(pt, a, b);
+                        if (d2 <= threshold2 && d2 < bestScore) { best = f.properties || {}; bestScore = d2; }
+                      }
+                    } else if (g.type === 'MultiLineString') {
+                      for (const line of g.coordinates || []) {
+                        for (let i = 1; i < line.length; i++) {
+                          const a = map.project(line[i - 1]), b = map.project(line[i]);
+                          const d2 = distToSegment2(pt, a, b);
+                          if (d2 <= threshold2 && d2 < bestScore) { best = f.properties || {}; bestScore = d2; }
+                        }
+                      }
+                    } else if (g.type === 'Polygon') {
+                      if (pointInPolygon([lngLat.lng, lngLat.lat], g.coordinates)) return f.properties || {};
+                    } else if (g.type === 'MultiPolygon') {
+                      for (const poly of g.coordinates || []) {
+                        if (pointInPolygon([lngLat.lng, lngLat.lat], poly)) return f.properties || {};
+                      }
+                    }
+                  }
+                  return best;
+                } catch (_e) { return null; }


The feature hit-testing logic in earlyLookup (lines 4141-4188) is nearly identical to the logic in updateInfoFromEventPoint (lines 4508-4599). Both implement the same geometry type checks (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon) with identical distance calculations and thresholds. This substantial duplication (~50 lines) makes the code harder to maintain. Consider extracting this into a shared function that takes the click point, features array, and tolerance as parameters.

Copilot · 2025-11-20T02:27:19Z

+                  const features = Array.isArray(data.features) ? data.features : [];
+                  if (!features.length) return null;
+                  const pt = map.project([lngLat.lng, lngLat.lat]);
+                  const tol = Number.isFinite(el._gmInfoTolerance) ? Math.max(1, Number(el._gmInfoTolerance)) : 8;


Magic number tolerance values (8 for default, 6 for hover) are hardcoded here and again at line 4514. Consider defining these as named constants (e.g., DEFAULT_CLICK_TOLERANCE = 8, DEFAULT_HOVER_TOLERANCE = 6) to make the code more maintainable and ensure consistency.

Copilot · 2025-11-20T02:27:20Z


+        // Fallback: if Geoman doesn't emit gm:loaded promptly, attach info box handlers early
+        try {
+          setTimeout(() => {


Magic number 400ms timeout is used without explanation. Consider defining this as a named constant (e.g., GEOMAN_LOADED_FALLBACK_DELAY = 400) to make the code more self-documenting and easier to tune if needed.

Copilot · 2025-11-20T02:27:22Z

+                    } catch (_e3) {}
+                  }
+                  // Auto clear after a short delay
+                  setTimeout(() => {


Magic number 700ms is used for the flash highlight duration without explanation. Consider defining this as a named constant (e.g., FLASH_HIGHLIGHT_DURATION_MS = 700) to make the code more self-documenting and easier to adjust.

Copilot · 2025-11-20T02:27:23Z

+                for (const f of features) {
+                  if (!f || !f.geometry) continue;
+                  const g = f.geometry;
+                  if (g.type === 'Point') {
+                    const p = map.project(g.coordinates);
+                    const d2 = dist2(clickPoint, p);
+                    if (d2 <= threshold2 && d2 < bestScore) {
+                      best = f.properties || {};
+                      bestGeom = g;
+                      bestScore = d2;
+                    }
+                  } else if (g.type === 'MultiPoint') {
+                    for (const c of g.coordinates || []) {
+                      const p = map.project(c);
+                      const d2 = dist2(clickPoint, p);
+                      if (d2 <= threshold2 && d2 < bestScore) {
+                        best = f.properties || {};
+                        bestGeom = { type: 'Point', coordinates: c };
+                        bestScore = d2;
+                      }
+                    }
+                  } else if (g.type === 'LineString') {
+                    const coords = g.coordinates || [];
+                    for (let i = 1; i < coords.length; i++) {
+                      const a = map.project(coords[i - 1]);
+                      const b = map.project(coords[i]);
+                      const d2 = distToSegment2(clickPoint, a, b);
+                      if (d2 <= threshold2 && d2 < bestScore) {
+                        best = f.properties || {};
+                        bestGeom = g;
+                        bestScore = d2;
+                      }
+                    }
+                  } else if (g.type === 'MultiLineString') {
+                    for (const line of g.coordinates || []) {
+                      for (let i = 1; i < line.length; i++) {
+                        const a = map.project(line[i - 1]);
+                        const b = map.project(line[i]);
+                        const d2 = distToSegment2(clickPoint, a, b);
+                        if (d2 <= threshold2 && d2 < bestScore) {
+                          best = f.properties || {};
+                          bestGeom = g;
+                          bestScore = d2;
+                        }
+                      }
+                    }
+                  } else if (g.type === 'Polygon') {
+                    const pt = [ev.lngLat.lng, ev.lngLat.lat];
+                    if (pointInPolygon(pt, g.coordinates)) {
+                      best = f.properties || {};
+                      bestGeom = g;
+                      bestScore = 0;
+                      break;
+                    }
+                  } else if (g.type === 'MultiPolygon') {
+                    const pt = [ev.lngLat.lng, ev.lngLat.lat];
+                    let hit = false;
+                    for (const poly of g.coordinates || []) {
+                      if (pointInPolygon(pt, poly)) { hit = true; break; }
+                    }
+                    if (hit) {
+                      best = f.properties || {};
+                      bestGeom = g;
+                      bestScore = 0;
+                      break;
+                    }
+                  }
+                }


The feature hit-testing algorithm iterates through all features in the collection without early termination for most geometry types. For large feature collections, this could cause performance issues on every click/hover event. Consider adding spatial indexing or at least terminating the search after finding a hit for Points and LineStrings (similar to how Polygons use break at line 4571).

Copilot · 2025-11-20T02:27:23Z

+                    if (pointInPolygon(pt, g.coordinates)) {
+                      best = f.properties || {};
+                      bestGeom = g;
+                      bestScore = 0;


The value assigned to bestScore here is unused.

Copilot · 2025-11-20T02:27:23Z

+                    if (hit) {
+                      best = f.properties || {};
+                      bestGeom = g;
+                      bestScore = 0;


The value assigned to bestScore here is unused.

Copilot · 2025-11-20T02:27:23Z

+                if (best) {
+                  showInfoBoxWithProps(best);
+                  // Flash highlight only on explicit clicks (force === true)
+                  if (force && bestGeom) {


This use of variable 'force' always evaluates to true.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Show info box for selected feature in geoman

92d9c3c

Copilot AI review requested due to automatic review settings November 20, 2025 02:20

Copilot started reviewing on behalf of giswqs November 20, 2025 02:20 View session

github-actions Bot temporarily deployed to pull request November 20, 2025 02:21 Inactive

Copilot finished reviewing on behalf of giswqs November 20, 2025 02:22

Copilot AI reviewed Nov 20, 2025

View reviewed changes

Update anymap/static/maplibre_widget.js

94c073b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions Bot temporarily deployed to pull request November 20, 2025 02:30 Inactive

Update anymap/static/maplibre_widget.js

c787512

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions Bot temporarily deployed to pull request November 20, 2025 02:32 Inactive

giswqs and others added 3 commits November 19, 2025 21:33

Update anymap/static/maplibre_widget.js

6e23597

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update anymap/maplibre.py

f87c55e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update anymap/static/maplibre_widget.js

abfac38

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions Bot temporarily deployed to pull request November 20, 2025 02:36 Inactive

giswqs merged commit 2eab15f into main Nov 20, 2025
8 checks passed

giswqs deleted the infobox branch November 20, 2025 02:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show info box for selected feature in geoman#132

Show info box for selected feature in geoman#132
giswqs merged 6 commits intomainfrom
infobox

giswqs commented Nov 20, 2025

Uh oh!

github-actions Bot commented Nov 20, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Copilot AI Nov 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

giswqs commented Nov 20, 2025

Uh oh!

github-actions Bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Nov 20, 2025 •

edited

Loading