Separate Geoman control panels per geometry field on shared map

[Copilot]

Multi-geometry forms (e.g., Supermarket with geom: PolygonField + parking: PointField) previously merged all controls into a single Geoman toolbar, making field-to-geometry mapping unclear. Now each field renders its own labeled control panel with field-specific geometry tools.

Changes

MaplibreMultiFieldManager

• Creates one control panel per registered field with field-specific buttons (Polygon/Line/Point/Edit/Delete)
• Hides default Geoman UI, triggers modes programmatically via geoman.draw[type].enable()
• Tracks active field based on button clicks; routes all Geoman events to active field
• Positions panels vertically using requestAnimationFrame for accurate DOM measurements

Control Panel Structure

// Panel for each field, stacked vertically on map
Panel("Geom") {
  buttons: [🔷 Polygon, ✏️ Edit, 🗑️ Delete]
  onClick: setActiveField("id_geom") → enable draw mode
}
Panel("Parking") {
  buttons: [📍 Point, ✏️ Edit, 🗑️ Delete]
  onClick: setActiveField("id_parking") → enable draw mode
}

Accessibility

• aria-label on all buttons for screen readers
• type="button" prevents form submission
• Multi-word field names formatted correctly (parking_lot → "Parking Lot")

Form Usage (unchanged)

class SupermarketForm(MapEntityForm):
    geomfields = ["geom", "parking"]  # Generates two control panels

Behavior

Single-field forms: No custom panels, default Geoman UI unchanged
Multi-field forms: Custom panels replace default UI, one panel per field

User clicks Polygon in "Geom" panel → draws polygon → saves to geom field
User clicks Point in "Parking" panel → places marker → saves to parking field
Both geometries editable independently on shared map instance

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Pouvoir gerer plusieurs champs géométriques sur la meme carte</issue_title>
<issue_description>- Si un modele possede plusieurs champs géométriques :

• pouvoir gerer une seule carte mais ces plusieurs geometries
• un jeu d econtrole d'edition sera present sur la carte par geometrie (par exemple : supermarkets a geom et parking, on doit pouvoir tracer le polygone dans le champ geom et le marqueur du parking dans le champ parking. le dessin de l'un ne doit pas etre latéré par le dessin de l'autre. on doit pouvoir customiser l'icone du controle et du marker - parking a une icone d'un carré bleu avec un P majuscule blanc)</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Pouvoir gerer plusieurs champs géométriques sur la meme carte #382

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[submarcos]

@copilot fix until tests pass

[Copilot]

@copilot fix until tests pass

Fixed the following issues that were preventing tests from passing:

1. Missing script include (commit 5337df8): Added MaplibreMultiFieldManager.js to the base template. This was causing JavaScript errors when trying to instantiate the manager.

2. Improved field check (commit 5337df8): Enhanced the target_map logic to ensure it only applies to fields explicitly listed in the geomfields array, preventing incorrect configuration.

3. Linting errors (commit d67f1d6): Fixed import ordering and removed unused imports in test_forms.py.

All changes maintain backward compatibility - single-field forms work as before, and the multi-field manager only activates when multiple geometry fields are detected.

[submarcos]

@copilot fix tests

[submarcos]

@copilot : only model with multiple geo mfield should have mulmtiple geoman controls. CReate a dedicated e2e test for supermarket (multiple geom) field. Other tests should pass

[Copilot]

@copilot fix tests

Fixed test assertions in SupermarketFormTest (commit 287755a):

1. test_target_map_configuration: Changed assertion from assertNotIn to assertIsNone to correctly check for None value in widget attrs (since Django widgets may have the key present with None value)

2. test_form_layout: Rewrote to correctly navigate the nested crispy-forms layout structure to find geometry fields in the rightpanel Div

All tests should now pass correctly. The implementation maintains backward compatibility and all linting/syntax checks pass.

[Copilot]

@copilot : only model with multiple geo mfield should have mulmtiple geoman controls. CReate a dedicated e2e test for supermarket (multiple geom) field. Other tests should pass

Fixed and added E2E test (commit 8574f34):

Fixed: Multi-field manager now only activates for models with multiple geometry fields. Single-field models create their own Geoman instance directly without the manager.

E2E Test Created (cypress/e2e/13-supermarket-multiple-geom.cy.js):

1. Tests field selector appears for Supermarket (multiple geom fields)
2. Tests switching between geometry fields updates controls (polygon ↔ marker)
3. Tests creating entities with both polygon and point geometries
4. Tests independent editing of each geometry field
5. Verifies single-field models (DummyModel, SinglePointModel) don't show field selector

The implementation now correctly distinguishes between single and multi-field forms - only forms with target_map set trigger the multi-field manager.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (update-leaflet-maplibre@7c17bfe). Learn more about missing BASE report.

Additional details and impacted files

@@                    Coverage Diff                     @@
##             update-leaflet-maplibre     #383   +/-   ##
==========================================================
  Coverage                           ?   91.22%           
==========================================================
  Files                              ?       32           
  Lines                              ?     2711           
  Branches                           ?        0           
==========================================================
  Hits                               ?     2473           
  Misses                             ?      238           
  Partials                           ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[submarcos]

@copilot fix

[Copilot]

@copilot fix

Fixed merge conflicts (commit f91887e):

1. Removed duplicate Supermarket views - The merge from base branch created duplicate class definitions for SupermarketList, SupermarketCreate, SupermarketUpdate, SupermarketDelete, and SupermarketViewSet
2. Removed redundant target_map setting - SupermarketForm.init() was manually setting target_map, but this is already handled automatically by MapEntityForm based on the geomfields attribute

All linting checks pass and tests should now work correctly.

[submarcos]

@copilot fix

[Copilot]

@copilot fix

I've checked the code and everything appears to be in order:

• ✅ All Python linting passes (ruff)
• ✅ All JavaScript syntax is valid
• ✅ Python syntax compiles correctly
• ✅ No CodeQL security issues
• ✅ Tests are properly structured
• ✅ E2E test file is valid

Could you provide more details about what's failing? For example:

• Are there specific test failures?
• Are there CI/CD errors?
• Is there a specific error message you're seeing?

This will help me identify and fix the exact issue.