# Map Selection

Last updated:

<!-- -->

October 18, 2026

<!-- -->

\| 2 minutes read

<br />

<br />

This example demonstrates how to explore various points of interest (POIs) and select destinations with ease.

## How it works[​](#how-it-works "Direct link to How it works")

This example demonstrates the following features:

* Explore and select Points of Interest (POIs) on the map.
* Highlight and display detailed information about selected landmarks.
* Dynamically interact with map features through user taps.

![Map displaying multiple POIs](/docs/flutter/assets/images/example_flutter_map_selection1-e1d26bb5ae4598c61c7e1b51cf80cf50.png)

**Map displaying multiple POIs**

![Selected Parking Garage POI](/docs/flutter/assets/images/example_flutter_map_selection2-9353ec7e2e6916735a77363c2026c2f2.png)

**Selected Parking Garage POI**

### UI and Map Integration[​](#ui-and-map-integration "Direct link to UI and Map Integration")

The selection is highlighted when it is tapped. The taps are listened to by \_registerLandmarkTapCallback , which is called in the \_onMapCreated() callback, executed when the interactive map is initialized and ready for use.

main.dart[View on Github](https://github.com/magiclane/magiclane-maps-sdk-examples-for-flutter/tree/main/map_selection/lib/main.dart?ref_type=heads#L18)

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Map Selection',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late GemMapController _mapController;

  Landmark? _focusedLandmark;

  @override
  void dispose() {
    GemKit.release();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[900],
        title: const Text(
          'Map Selection',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Stack(
        children: [
          GemMap(
            key: ValueKey("GemMap"),
            onMapCreated: _onMapCreated,
            appAuthorization: projectApiToken,
          ),
          if (_focusedLandmark != null)
            Align(
              alignment: Alignment.bottomCenter,
              child: LandmarkPanel(
                onCancelTap: _onCancelLandmarkPanelTap,
                landmark: _focusedLandmark!,
              ),
            ),
        ],
      ),
      resizeToAvoidBottomInset: false,
    );
  }

  // The callback for when map is ready to use.
  Future<void> _onMapCreated(GemMapController controller) async {
    // Save controller for further usage.
    _mapController = controller;

    // Listen for map landmark selection events.
    await _registerLandmarkTapCallback();

    // Center the map on coordinates of Milan, Italy.
    _mapController.centerOnCoordinates(
      Coordinates(latitude: 45.46467971801758, longitude: 9.192851066589355),
      zoomLevel: 70,
    );
  }

  Future<void> _registerLandmarkTapCallback() async {
    _mapController.registerOnTouch((pos) async {
      // Select the object at the tap position.
      await _mapController.setCursorScreenPosition(pos);

      // Get the selected landmarks.
      final landmarks = _mapController.cursorSelectionLandmarks();

      // Reset the cursor position back to middle of the screen
      await _mapController.resetMapSelection();

      // Check if there is a selected Landmark.
      if (landmarks.isNotEmpty) {
        // Highlight the selected landmark.
        _mapController.activateHighlight(landmarks);

        setState(() {
          _focusedLandmark = landmarks[0];
        });

        // Use the map controller to center on coordinates.
        _mapController.centerOnCoordinates(
          _focusedLandmark!.coordinates,
          zoomLevel: 70,
        );
      }
    });
  }

  void _onCancelLandmarkPanelTap() {
    // Remove landmark highlights from the map.
    _mapController.deactivateAllHighlights();

    setState(() {
      _focusedLandmark = null;
    });
  }
}

```