Skip to content
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

[BUG] Through clicks and gestures #516

Open
KostyaLocal opened this issue Oct 26, 2024 · 3 comments
Open

[BUG] Through clicks and gestures #516

KostyaLocal opened this issue Oct 26, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@KostyaLocal
Copy link

KostyaLocal commented Oct 26, 2024 •
edited
Loading

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();
              },
            ),
          ],
        );
      },
    );
  }
}
@KostyaLocal KostyaLocal added the bug Something isn't working label Oct 26, 2024
@KostyaLocal KostyaLocal changed the title [BUG] Through gestures on web [BUG] Through presses and gestures Oct 26, 2024
@KostyaLocal KostyaLocal changed the title [BUG] Through presses and gestures [BUG] Through clicks and gestures Oct 26, 2024
@KostyaLocal
Copy link
Author

Hey, any news?

@kevinvenclovas
Copy link

hanging on the same issue currently :/

@danialb007
Copy link

Hi, I just found this example, see if you can fix your problem using this.
scrolling_map.dart

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kevinvenclovas @KostyaLocal @danialb007