When the anchor point is out of bounds, the whole marker widget disappears

[aytunch]

You can see from the second image that left marker is lost with the slightest pan. The moment the little triangle of marker leaves out of any side of the screen, the whole widget disappears. Is there a way to keep it on the map like a safe area or setting a margin for marker?

[aytunch]

I had a chance to experience this issue in a real device using hand gestures instead of the mouse and it really bothers me alot to see a bunch of disappearing markers on the screen. Very buggy feeling. I hope there is already a solution or a quick fix. The reason I switched from flutter google maps to flutter maps and mapbox was mainly the power of using custom widget markers(many thanks). And i assume most people will use markers that has a good amount of width like the ones i have instead of default location markers.

[johnpryan]

I think this is an easy fix, thanks for the feedback.

[aytunch]

@johnpryan John, were you able to look into this problem? It would be great to have that working:)

[aytunch]

I think this is an easy fix, thanks for the feedback.

@johnpryan Sorry for reminding. I am sure you are very busy. I am reminding again since you said this requires an easy fix. I want my big markers not to disappear:D

[aytunch]

@johnpryan Do you think wrapping FlutterMap inside of an SizedBox which is larger than the screen size or just wrapping it in a container with margin/padding would solve this issue? And also would it have any side effects in terms of for i.e. performance?

[johnpryan]

I have not found time to think about the approach. If you have any ideas I would be happy to review a pull request.

[aytunch]

Unfortunately all the ideas I have involve higher level solutions instead of deeper level ones. So more like workarounds. Which build function is responsible for drawing markers? Can you send a link for the exact line? Also I wonder how a similar situation with CircleLayer, PolylineLayer, PolygonLayer, OverlayImageLayer works just out of the box? Or do they? I never used those however I assume if we have a PolygonLayer, it doesn't disappear totally if the center of the polygon is out of the screen bounds. Right?

[aytunch]

I found the place: marker_layer.dart

class MarkerLayer extends StatelessWidget {
  final MarkerLayerOptions markerOpts;
  final MapState map;
  final Stream<Null> stream;

  MarkerLayer(this.markerOpts, this.map, this.stream);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: stream, // a Stream<int> or null
      builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        var markers = <Widget>[];
        for (var markerOpt in markerOpts.markers) {
          var pos = map.project(markerOpt.point);
          pos = pos.multiplyBy(map.getZoomScale(map.zoom, map.zoom)) -
              map.getPixelOrigin();

          var pixelPosX =
              (pos.x - (markerOpt.width - markerOpt.anchor.left)).toDouble();
          var pixelPosY =
              (pos.y - (markerOpt.height - markerOpt.anchor.top)).toDouble();
          // --==== I think in these three lines, we are omitting the offscreen markers ====--
          if (!map.bounds.contains(markerOpt.point)) {
            continue;
          }
          // --====                                                                     ====-- 
          markers.add(
            Positioned(
              width: markerOpt.width,
              height: markerOpt.height,
              left: pixelPosX,
              top: pixelPosY,
              child: markerOpt.builder(context),
            ),
          );
        }
        return Container(
          child: Stack(
            children: markers,
          ),
        );
      },
    );
  }
}

Instead of using map.bounds in if (!map.bounds.contains(markerOpt.point)) {...}, we need to use a new bounds which is extended by half of the markers width in x direction and half of the markers height in y direction. I also know that by the power of your library, we can have many different types of marker widgets with different width and height. So it would only make sense to extend map.bounds by user defined widthextend and heightextend.

If you can tell me how to extend a mapBounds with screen pixel values, I will be happy to try it out and make a PR for you to review.

[aytunch]

@johnpryan Also in addition to new mapBounds, I believe that we might need to update the

return Container(
          child: Stack(
            children: markers,
          ),
        );

with Stacks property overflow: Overflow.visible
These two additions might fix this issue, hopefully:)