How to make the overlapping background obscure the text?

M2dL1fe commented 1 week ago

evil159 commented 6 days ago

Hi @M2dL1fe, please check out https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/

M2dL1fe commented 5 days ago

I don't need Collision detection. I want the background to block the text,In order of precedence. @evil159

evil159 commented 5 days ago

@M2dL1fe, I see, could you provide a code snippet showcasing how you setup price markers to be shown?

M2dL1fe commented 4 days ago

List<MapEntry<Point, String>> list = [
    MapEntry(Point(coordinates: Position(175.06285, -40.879502000000002)), "\$1.01M"),
    MapEntry(Point(coordinates: Position(175.06292500000001, -40.878473)), "\$828K"),
    MapEntry(Point(coordinates: Position(175.063095, -40.878227000000003)), "\$745K"),
    MapEntry(Point(coordinates: Position(175.06317200000001, -40.879559)), "\$670K"),
    MapEntry(Point(coordinates: Position(175.06311857994999, -40.879370662215003)), "\$613K"),
    MapEntry(Point(coordinates: Position(175.06311857994999, -40.879370662215003)), "\$563K"),
    MapEntry(Point(coordinates: Position(175.063425, -40.878906000000001)), "\$590K"),
  ];

  addImage(MapboxMap controller) async {
    final bytes = await rootBundle.load('images/iconImage.png');
    await controller.style.addStyleImage("iconImage", 2, MbxImage(data: bytes.buffer.asUint8List(), width: 130, height: 59), false, [ImageStretches(first: 30, second: 40), ImageStretches(first: 90, second: 100)], [ImageStretches(first: 23, second: 28)], ImageContent(left: 15, right: 115, top: 5, bottom: 45));
  }

  addPointAnnotations(MapboxMap controller) async {
    final pointAnnotationManager = await controller.annotations.createPointAnnotationManager();
    pointAnnotationManager.setTextIgnorePlacement(true);
    pointAnnotationManager.setTextAllowOverlap(true);
    pointAnnotationManager.setIconAllowOverlap(true);
    pointAnnotationManager.createMulti(createAnnotations());
  }

  List<PointAnnotationOptions> createAnnotations() => list
      .map((it) => PointAnnotationOptions(
            geometry: it.key,
            textField: it.value,
            iconImage: "iconImage",
            symbolSortKey: 1,
            textJustify: TextJustify.CENTER,
            textAnchor: TextAnchor.CENTER,
            iconTextFit: IconTextFit.BOTH,
            textColor: Colors.white.value,
            textSize: 12,
          ))
      .toList();

iconImage

@evil159

M2dL1fe commented 4 days ago

    pointAnnotationManager.setTextIgnorePlacement(true);
      pointAnnotationManager.setTextAllowOverlap(true);
      pointAnnotationManager.setIconAllowOverlap(true);
      pointAnnotationManager.setTextOptional(true);

The same is true with the above Settings

evil159 commented 4 days ago

@M2dL1fe Thank you for the sample code, specify symbolSortKey to prevent symbols from overlapping, e.g. in your sample

  List<PointAnnotationOptions> createAnnotations() => list
      .map((it) => PointAnnotationOptions(
            geometry: it.key,
            textField: it.value,
            iconImage: "iconImage",
            symbolSortKey: 1,
            textJustify: TextJustify.CENTER,
            textAnchor: TextAnchor.CENTER,
            iconTextFit: IconTextFit.BOTH,
            textColor: Colors.white.value,
            textSize: 12,
-          )
+          )..symbolSortKey = list.indexOf(it).toDouble()

          )
      .toList();

M2dL1fe commented 3 days ago

How do we do this when symbolSortKey is consistent? @evil159

mapbox / mapbox-maps-flutter

How to make the overlapping background obscure the text? #760