[FEATURE] Add toggle for viewport filtering in vector layers

[tchahnson]

What do you want implemented?

I propose adding a boolean toggle (drawToViewport) to PolygonLayerOptions (and possibly other vector layers like PolylineLayerOptions). This would allow developers to enable or disable viewport-based filtering of vector shapes (e.g., polygons, polylines).

This feature would:

1. Enhance flexibility: Allow applications to toggle viewport filtering as per their specific requirements.
2. Improve debugging: Developers could easily toggle filtering to troubleshoot rendering or dataset issues.
3. Support broader use cases: Some applications (e.g., analytical dashboards) may prefer to render all data regardless of performance trade-offs.

Details:

Currently, vector layers such as polygons are filtered based on the viewport to improve performance when displaying large datasets. While this is useful, there are scenarios where developers may want to display all vector shapes regardless of their visibility within the viewport. For example:

• Showing an overview of all data on the map at a lower resolution.
• Performing visual debugging or analytical tasks that require all polygons to be rendered.

By introducing a drawToViewport boolean, developers can explicitly control whether to filter vector data by the viewport.

What other alternatives are available?

Currently, the only workaround is to modify the logic in _updateDisplayedPolygons (or similar methods) to disable filtering. However, this approach:

1. Requires manual changes to application code or library source.
2. Reduces maintainability and could break when updating the flutter_map library.

Introducing this feature at the library level ensures a standardized, reusable, and maintainable solution.

Can you provide any other information?

Here’s an example of how the drawToViewportoption could be implemented:

1. Adding the toggle to layer options:

class PolygonLayerOptions {
  final bool drawToViewport;

  PolygonLayerOptions({
    required this.polygons,
    this.drawToViewport = true, // Defaults to true for backward compatibility
    ...
  });
}

2. Updating filtering logic in _updateDisplayedPolygons:

    if (drawToViewport) {
      // Filter polygons based on viewport
      _displayedPolygons = currentPolygons
          .where((p) => _polygonIntersectsBounds(
                p,
                topLeftLatLng.latitude,
                bottomRightLatLng.latitude,
                topLeftLatLng.longitude,
                bottomRightLatLng.longitude,
              ))
          .toList();
    } else {
      // Skip filtering and display all polygons
      _displayedPolygons = currentPolygons;
    }

This change would be backward-compatible, as drawToViewportwould default to true.

Severity

Annoying: Currently have to use workarounds

[JaffaKetchup]

Hi @tchahnson,
Thanks for submitting a feature request. I recommend not using AI in situations such as this, as it may often lack context or apply to an old version, both of which are true here.
This feature already exists for both PolylineLayer (see .cullingMargin) and PolygonLayer (see .polygonCulling). Documentation can be found in your IDE or at https://pub.dev/documentation/flutter_map/latest/flutter_map.
If you need any help, please feel free to join our Discord server!

[tchahnson]

Thank you for the clarification @JaffaKetchup !

[tchahnson]

Hi @JaffaKetchup

I have attempted to test the culling, and I have found that it seems to make no effective improvements in performance.

FlutterMap(
  mapController: _mapController,
  options: const MapOptions(
    initialCenter: LatLng(42.0, -71.0),
    initialZoom: 7.0,
    interactionOptions: InteractionOptions(
      flags: InteractiveFlag.all, // Enable all interactions
    ),
  ),
  children: [
    mapLayer,
    if (_showVectorData &&
        (_lowResPolygons.isNotEmpty ||
            _highResPolygons.isNotEmpty))
      PolygonLayer(
        polygons:
            _useHighRes ? _highResPolygons : _lowResPolygons,
        polygonCulling: true,
      ),
  ],
),
                
                

And for the following comparison of my version (code not included in comment) [left] vs the out the box culling enabled (as per code seen above) [right], I have found that the performance and speed is considerably improved with my method.

I understand that the 'polygons & total edges displayed' may not reflect the actual rendered shapes and that the shapes may be cached instead for performance. As I am unable to optimize the performance, may I ask for assistance with diagnostics to better configure flutter_map for performance?

[josxha]

Hello @tchahnson, can you elaborate a bit how _highResPolygons and _lowResPolygons get created in your example please? Are these generated at runtime?