openwisp / openwisp/netjsongraph.js

[change] Points cannot be clicked when covered by polygons

Open
#599 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
314
Forks
119
Avg merge
18h 17m
Merged PRs (30d)
15

Description

Is your change related to a problem? Please describe.

Overlapping map features

When geographic features overlap, larger shapes can cover smaller shapes and points. Covered features become difficult to see or impossible to select.

For example, a polygon can cover a point or a smaller polygon. The user sees the larger polygon instead of the covered feature, and clicking opens the larger polygon.

Describe the solution you'd like

Map features must be layered so smaller or more specific features remain visible and clickable when they overlap larger features.

Points must always appear above lines and polygons. Lines must appear above polygons. For overlapping polygons, smaller polygons must remain above larger polygons. For overlapping lines, shorter lines must remain above longer lines.

Click behavior must follow the same priority. Users must be able to open the visible point, line, or smaller polygon instead of the larger overlapping feature.

The implementation must support points, lines, polygons, and multipolygons.

Describe alternatives you've considered

Making shapes non-interactive would allow clicks to reach features below them, but would make shapes impossible to select.

Changing only the visual layer order may not be sufficient. The interaction behavior must follow the same priority as the visual layers.

Additional context

The current implementation renders polygons in a Leaflet pane above the ECharts overlay. The README describes polygons as being below the ECharts overlay.

Tests should cover:

  • A point inside a polygon.
  • A line crossing a polygon.
  • A smaller polygon inside a larger polygon.
  • Partially overlapping polygons.
  • Overlapping lines.
  • Multipolygons.
  • Click behavior after zooming or clustering updates.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the README's layer-order description and inspect the current Leaflet pane and ECharts overlay rendering and interaction paths. Ensure points, lines, smaller polygons, and multipolygons have matching visual and click priority. Add tests for the listed overlap cases, including zooming and clustering updates, and confirm the intended feature opens.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.