How can we achieve a popup window on tap of a Point ?

[Shiba-Kar]

[LjubiTech-Maxko]

This is currently not possible because View Annotations are not yet supported.

[ezesoftchao]

Listener(
        onPointerDown: (event) {
          posx = event.localPosition.dx;
          posy = event.localPosition.dy;
          setState(() {
            detail = '';
          });
          // use event.localPosition.dx or event.localPosition.dy
        },
        onPointerMove: (event) {
          setState(() {
            posx = event.localPosition.dx;
            posy = event.localPosition.dy;
            detail = '';
          });
          print('horizontal x: ${event.localPosition.dx} de: ${size.width}');
          print('Estoooo');
        },
        child: Stack(
          fit: StackFit.expand,
          children: [
            MapWidget(
              key: ValueKey("mapWidget"),
              resourceOptions:
                  ResourceOptions(accessToken: MapsDemo.ACCESS_TOKEN),
              onTapListener: (ScreenCoordinate coord) async {
                // need to convert coord to real ScreenCoordinate for querying features.
                final ScreenCoordinate conv =
                    await mapController!.pixelForCoordinate(
                  Point(
                    coordinates: Position(
                      coord.y,
                      coord.x,
                    ),
                  ).toJson(),
                );

                final List<QueriedFeature?> features =
                    await mapController!.queryRenderedFeatures(
                  RenderedQueryGeometry(
                    value: jsonEncode(conv.encode()),
                    type: Type.SCREEN_COORDINATE,
                  ),
                  // add these options if you want to query only specific layer,
                  // for example, your layer which is using mentioned gejson source
                  RenderedQueryOptions(
                    layerIds: [
                      'point_layer',
                    ],
                  ),
                );

                if (features.isNotEmpty) {
                  final geometry = features.first!.feature['geometry']!;
                  final newG = geometry as Map;
                  final texto =
                      'Esto es ${(newG['coordinates'] as List).first} : ${(newG['coordinates'] as List).last} ';
                  setState(() {
                    detail = texto;
                  });
                  // mapController.popu
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(texto),
                    ),
                  );
                } else {
                  setState(() {
                    detail = '';
                  });
                }

                // do what you need with the features
              },
              cameraOptions: CameraOptions(
                  center: Point(
                      coordinates: Position(
                    6.0033416748046875,
                    43.70908256335716,
                  )).toJson(),
                  zoom: 3.0),
              styleUri: MapboxStyles.LIGHT,
              textureView: true,
              onMapCreated: (MapboxMap controller) {
                mapController = controller;
              },
              onStyleLoadedListener: _onStyleLoadedCallback,
              onStyleDataLoadedListener: _onStyleDataLoadedListener,
            ),
            detail.isNotEmpty
                ? Positioned(
                    child: Container(
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            spreadRadius: 5,
                            blurRadius: 10,
                            color: Colors.grey,
                          ),
                        ],
                        border: Border.all(color: Colors.black),
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20),
                          topRight: Radius.circular(20),
                          bottomRight: (size.width - posx) < 200
                              ? Radius.circular(0)
                              : Radius.circular(20),
                          bottomLeft: (size.width - posx) < 200
                              ? Radius.circular(20)
                              : Radius.circular(0),
                        ),
                      ),
                      width: 180,
                      padding: EdgeInsets.all(10),
                      // height: 50,
                      child: Center(
                        child: Text(
                          detail,
                          // overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    // right: (size.width - posx) < 200 ? posx : null,
                    left: (size.width - posx) < 200 ? posx - 200 : posx + 8,
                    top: posy - 60,
                  )
                : Container()
          ],
        ),
      ),