maplibre / flutter-maplibre-gl

Customizable, performant and vendor-free vector and raster maps, flutter wrapper for maplibre-native and maplibre-gl-js (fork of flutter-mapbox-gl/maps)
https://pub.dev/packages/maplibre_gl
Other
226 stars 125 forks source link

how to create the popup _onSymbolTapped #209

Closed lucifez385 closed 1 year ago

lucifez385 commented 1 year ago

how to create the popup _onSymbolTapped

same js lib https://maplibre.org/maplibre-gl-js-docs/example/set-popup/

mariusvn commented 1 year ago

It is not implemented if i am not wrong but you can use the toScreenLocation method to create a popup widget in a stack at the selected position

lucifez385 commented 1 year ago

It is not implemented if i am wrong but you can use the toScreenLocation method to create a popup widget in a stack at the selected position

Is there a usage example? I still don't understand

mariusvn commented 1 year ago

I was thinking of something like that:

    List<Widget> popups = [];
    const int popupWidth = 200;
    const int popupHeight = 100;

    _controller!.onSymbolTapped.add((symbol) async {
      LatLng pos = symbol.options.geometry!;
      Point<num> screenPos = (await _controller!.toScreenLocation(pos));

      setState(() {
        popups.add(Positioned(
            top: (screenPos.y - popupHeight).toDouble(),
            left: screenPos.x - (popupWidth / 2),
            child: Container(
              width: popupWidth.toDouble(),
              height: popupHeight.toDouble(),
              color: Colors.white,
              child: Container( /* content */ ),
            )
        ));
      });
    });

    /* in the build method */

    return Stack(
      children: [
        map,
        ...popups,
      ],
    )
mariusvn commented 1 year ago

@lucifez385 Is it resolved ? if yes, please close the issue. If not, we can talk about it here but as far as I can tell, we don't have plans to implement this in the lib.

JulianBissekkou commented 1 year ago

@lucifez385 Closing this as @mariusvn provided a very nice example. If you have the feeling that this issue should not be closed or that this should be a feature then feel free to reopen this issue or create a new one describing the feature in detail 👍🏽

JPFrancoia commented 3 days ago

Hi :wave: The solution above kinda works, but the popup ends up being a widget in a Stack. If I move the camera, the popup moves with it, it doesn't stay attached to a GPS position. Would you have an idea how to make a popup that sticks with GPS coordinates?