mapbox / mapbox/mapbox-maps-flutter

How to tap symbols on layer

Open
#711 12 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
380
Forks
204
PR merge metrics
No merged PRs in 30d

Description

How can we tap symbols added with SymbolLayer?

I have the source code below to show a symbol, but can't find how to make this tappable.

class _MapScreenState extends State<MapScreen> {
  final position = Position.named(lng: 24.9458, lat: 60.17180);
  MapboxMap? _mapboxMap;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MapWidget(
        cameraOptions: CameraOptions(zoom: 3.0),
        styleUri: '[my_style_uri]',
        textureView: true,
        onMapCreated: (map) => _mapboxMap = map,
        onStyleLoadedListener: _onStyleLoadedCallback,
      ),
    );
  }

  Future<void> _onStyleLoadedCallback(StyleLoadedEventData event) async {
    final point = Point(coordinates: position);

    await _mapboxMap?.style.addSource(GeoJsonSource(
      id: 'sourceId',
      data: json.encode(point),
    ));

    var modelLayer = SymbolLayer(
      id: 'layerId',
      sourceId: 'sourceId',
      iconImage: '[my_icon_name]',
    );
    _mapboxMap?.style.addLayer(modelLayer);
  }
}

This shows one icon on my map, but that's it.

Do we have any examples or docs for this? Thanks.

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 from the MapWidget, SymbolLayer, and style setup shown in the issue, then review the project's existing examples and documentation for map interaction APIs. Document or demonstrate how a symbol added to a layer can be tapped, including a verifiable example using the shown source and layer setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
documentation, mobile-dev
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.