Skip to content

[WIP] Fix click events passing through stacked elements on web map #666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[WIP] Fix click events passing through stacked elements on web map #666

wants to merge 1 commit into from

Conversation

Copy link

Copilot AI commented Oct 30, 2025

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original prompt

This section details on the original issue you should resolve

<issue_title>[BUG] Through clicks and gestures</issue_title>
<issue_description>### Platforms

web

Version of flutter maplibre_gl

0.20

Bug Description

On the web platform, if there are other elements on top of the map (placed via Stack) then clicks / drags are still passed to the map.

Steps to Reproduce

  1. place any button over the map with Stack
  2. press button
  3. the click will also happened on the map

Expected Results

Only the top widget is clickable

Actual Results

When you place any active elements on the map using Stack, clicks on them are also happened on the map. This happens only on the web

Code Sample

web/index.html

<head>
...
  <script src='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@^4.3/dist/maplibre-gl.css'
      rel='stylesheet'/>
</head>

pubspec.yaml

  maplibre_gl: ^0.20.0

main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MapLibre App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapWithButton(),
    );
  }
}

class MapWithButton extends StatefulWidget {
  @override
  _MapWithButtonState createState() => _MapWithButtonState();
}

class _MapWithButtonState extends State<MapWithButton> {
  MapLibreMapController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('MapLibre with Button')),
      body: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: MapLibreMap(
              styleString: 'https://demotiles.maplibre.org/style.json',
              initialCameraPosition: const CameraPosition(
                target: LatLng(37.7749, -122.4194),
                zoom: 10.0,
              ),
              onMapCreated: _onMapCreated,
              onMapClick: _onMapClick,
            ),
          ),
          Center(
            child: ElevatedButton(
              onPressed: _onButtonPressed,
              child: const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text('CLICK ME'),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _onMapCreated(MapLibreMapController controller) {
    _controller = controller;
  }

  void _onMapClick(Point<double> point, LatLng coordinates) {
    _showAlert(
        context, "Click map", "Clicked on: ${coordinates.latitude}, ${coordinates.longitude}");
  }

  void _onButtonPressed() {
    _showAlert(context, "Button pressed", "You pressed the button!");
  }

  void _showAlert(BuildContext context, String title, String content) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(title),
          content: Text(content),
          actions: [
            TextButton(
              child: Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

</issue_description>

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

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI requested a review from gabbopalma October 30, 2025 13:50
@gabbopalma gabbopalma assigned Copilot and unassigned gabbopalma and Copilot Nov 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gabbopalma gabbopalma Awaiting requested review from gabbopalma

Assignees

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] Through clicks and gestures

2 participants

@gabbopalma