[BUG] Through clicks and gestures

KostyaLocal commented 3 weeks ago

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

place any button over the map with Stack
press button
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();
              },
            ),
          ],
        );
      },
    );
  }
}

KostyaLocal commented 1 week ago

Hey, any news?

kevinvenclovas commented 1 week ago

hanging on the same issue currently :/

maplibre / flutter-maplibre-gl