Open
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
- 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();
},
),
],
);
},
);
}
}