Does anyone know how to adjust the number of pins displayed by zooming?

[iseruuuuu]

First

• I am using MapLibre to display pins on a map and am wondering how to automatically adjust the number of pins that appear on the map when zooming in or out. We would like to increase or decrease the number of pins each time the user performs a zoom operation, so that the map is both easy to read and appropriately informative.

Code

• I share code where map screen and controller.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:food_gram_app/core/data/supabase/map_service.dart';
import 'package:food_gram_app/core/model/posts.dart';
import 'package:food_gram_app/core/utils/async_value_group.dart';
import 'package:food_gram_app/core/utils/location.dart';
import 'package:food_gram_app/env.dart';
import 'package:food_gram_app/ui/component/modal_sheet/app_modal_sheet.dart';
import 'package:food_gram_app/ui/screen/map/map_libre_controller.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

final String apiKey = Env.mapLibre;
const styleUrl =
    'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json';

class MapScreen extends HookConsumerWidget {
  const MapScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final mapLibreController = ref.watch(mapLibreControllerProvider.notifier);
    final location = ref.watch(locationProvider);
    final mapService = ref.watch(mapServiceProvider);
    final isTapPin = useState(false);
    final post = useState<List<Posts?>>([]);
    return Scaffold(
      backgroundColor: Colors.white,
      body: AsyncValueSwitcher(
        asyncValue: AsyncValueGroup.group2(location, mapService),
        onData: (value) {
          return Stack(
            alignment: Alignment.bottomCenter,
            children: [
              MapLibreMap(
                onMapCreated: (mapLibre) {
                  mapLibreController
                    ..controller = mapLibre
                    ..setPin(
                      openDialog: (posts) {
                        isTapPin.value = true;
                        post.value = posts;
                      },
                    );
                },
                onMapClick: (_, __) {
                  isTapPin.value = false;
                },
                annotationOrder: const [AnnotationType.symbol],
                key: ValueKey('mapWidget'),
                myLocationEnabled: true,
                initialCameraPosition: CameraPosition(
                  target: LatLng(
                    value.$1.latitude,
                    value.$1.longitude,
                  ),
                  zoom: 15,
                ),
                trackCameraPosition: true,
                styleString: '$styleUrl?key=$apiKey',
              ),
              Visibility(
                visible: isTapPin.value,
                child: RestaurantInfoModalSheet(post: post.value),
              ),
            ],
          );
        },
      ),
    );
  }
}

import 'package:flutter/services.dart';
import 'package:food_gram_app/core/data/supabase/map_service.dart';
import 'package:food_gram_app/core/model/posts.dart';
import 'package:food_gram_app/gen/assets.gen.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'maplibre_controller.g.dart';

@Riverpod(keepAlive: true)
class MapLibreController extends _$MapLibreController {
  @override
  void build() {}

  late MapLibreMapController controller;

  Future<void> setPin({
    required void Function(List<Posts> post) openDialog,
  }) async {
    final bytes = await rootBundle.load(Assets.image.pin.path);
    final list = bytes.buffer.asUint8List();
    await controller.addImage('pin', list);
    final symbols = <SymbolOptions>[];
    ref.read(mapServiceProvider).whenOrNull(
      data: (value) {
        for (var i = 0; i < value.length; i++) {
          symbols.add(
            SymbolOptions(
              geometry: LatLng(value[i].lat, value[i].lng),
              iconImage: 'pin',
              iconSize: 0.4,
            ),
          );
        }
      },
    );
    await controller.addSymbols(symbols);
    controller.onSymbolTapped.add((symbol) async {
      final latLng = symbol.options.geometry;
      final lat = latLng!.latitude;
      final lng = latLng.longitude;
      final result =
          await ref.read(getRestaurantProvider(lat: lat, lng: lng).future);
      openDialog(result);
      await controller.animateCamera(
        CameraUpdate.newLatLngZoom(latLng, 16.5),
        duration: Duration(seconds: 2),
      );
    });
  }
}

Demo movie

ScreenRecording_11-11-2024.3-06-00_1.1.mov

Finally

• If there is any information missing, please let me know.

[josxha]

Hi @iseruuuuu, yes this is possible by using the iconAllowOverlap or iconIgnorePlacement property.

Edit: I just found #507. It could be that allow-overlap for symbols does not work.

[iseruuuuu]

@josxha
Thank you for your comment!
I have added the code as follows and it displays as expected.

await controller.setSymbolIconAllowOverlap(true);