[SfMaps] issue when use geogson has a ring inside MultiPolygon Feature

[aike1202]

Bug description

issue when use geogson has a ring inside MultiPolygon Feature

Steps to reproduce

1. frist i thout it is the problem when showDataLabels
   I have a Feature with name AAA and BBB ,AAA has 3 part one of the part is in Feature BBB , It's currect when showDataLabels is false and not pass shapeDataField in MapShapeSource , Android : when I set showDataLabels true and pass currct shapeDataField not showing the area inside the Feature BBB

2. then I tyr run on window find that when mouse hover the Feature AAA the area in Feature BBB appear agin ,then I thout it minght the problem off Feature BBB, not hover

3. then i removed the Feature AAA ,it is not show a hole in BBB I think this is the issue come from

   

here is my original Feature BBB

Code sample

Code sample

```dart import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_maps/maps.dart'; class MapPage extends StatefulWidget { const MapPage({super.key}); @override State createState() => _MapPageState(); } class _MapPageState extends State { late MapShapeSource _mapSource; int selectedIndex = 1; @override void initState() { _mapSource = const MapShapeSource.asset( 'assets/test.geojson', shapeDataField: 'name', ); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: SizedBox( child: Padding( padding: const EdgeInsets.all(8), child: SfMaps( layers: [ MapShapeLayer( source: _mapSource, showDataLabels: true, selectedIndex: selectedIndex, strokeColor: Colors.blue, strokeWidth: 4, ), ], ), ), ), ); } } ``` geojson ```json { "type": "FeatureCollection", "name": "test", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "name": "AAA" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 74.46059834640158, 39.364853780863591 ], [ 74.44766523509905, 38.226739986241732 ], [ 75.73666532825033, 38.356071099266941 ], [ 75.71942117984698, 39.274322001745944 ], [ 75.71942117984698, 39.274322001745944 ], [ 74.46059834640158, 39.364853780863591 ] ] ], [ [ [ 75.97107797060848, 38.988715793815267 ], [ 75.99478867466308, 38.646527223936062 ], [ 76.45175860735215, 38.646527223936062 ], [ 76.45175860735215, 39.000032266204968 ], [ 75.97107797060848, 38.988715793815267 ] ] ], [ [ [ 74.99462806726812, 37.836052248978085 ], [ 75.01187221567149, 37.172152535448674 ], [ 76.07238734247821, 37.232507054860442 ], [ 76.08963149088157, 37.905028842591527 ], [ 76.08963149088157, 37.905028842591527 ], [ 74.99462806726812, 37.836052248978085 ] ] ] ] } }, { "type": "Feature", "properties": { "name": "BBB" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 75.71942117984689, 39.274322001745936 ], [ 75.73666532825024, 38.356071099266948 ], [ 77.19258338914965, 38.342868548145617 ], [ 77.02876397931772, 39.325785007137213 ], [ 77.02876397931772, 39.325785007137213 ], [ 77.02876397931772, 39.325785007137213 ], [ 77.02876397931772, 39.325785007137213 ], [ 75.71942117984689, 39.274322001745936 ] ], [ [ 75.97107797060856, 38.988715793815281 ], [ 75.99480235715396, 38.646519856441103 ], [ 76.45534236744214, 38.648338575218027 ], [ 76.45372572852934, 39.000765858211672 ], [ 75.97107797060856, 38.988715793815281 ] ] ] ] } } ] } ```

Screenshots or Video

Screenshots / Video demonstration

Stack Traces

Stack Traces

```dart [Add the Stack Traces here] ```

On which target platforms have you observed this bug?

Android, Web, Windows

Flutter Doctor output

Doctor output

```console Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! [√] Flutter (Channel stable, 3.19.0, on Microsoft Windows [版本 10.0.22000.2538], locale zh-CN) • Flutter version 3.19.0 on channel stable at C:\Users\Aike\dev\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision bae5e49bc2 (9 weeks ago), 2024-02-13 17:46:18 -0800 • Engine revision 04817c99c9 • Dart version 3.3.0 • DevTools version 2.31.1 • Pub download mirror https://pub.flutter-io.cn • Flutter download mirror https://storage.flutter-io.cn [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at C:\Users\Aike\AppData\Local\Android\sdk • Platform android-34, build-tools 34.0.0 • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop Windows apps (Visual Studio Professional 2022 17.9.5) • Visual Studio at D:\Program Files\Microsoft Visual Studio\2022\Professional • Visual Studio Professional 2022 version 17.9.34723.18 • Windows 10 SDK version 10.0.22621.0 [√] Android Studio (version 2023.1) • Android Studio at C:\Program Files\Android\Android Studio1 • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314) [√] IntelliJ IDEA Ultimate Edition (version 2023.2) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2023.2.5 • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart [√] VS Code (version 1.87.2) • VS Code at C:\Users\Aike\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.84.0 [√] Connected device (4 available) • M2102J2SC (mobile) • adb-eff0552e-IhPBMc._adb-tls-connect._tcp • android-arm64 • Android 13 (API 33) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [版本 10.0.22000.2538] • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.107 • Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.80 ! Doctor found issues in 1 category. ```

[PreethikaSelvam]

Hi @aike1202,

Query: When I set showDataLabels true and pass shapeDataField in MapShapeSource, the area inside the Feature BBB is not visible.

We have analyzed your query and found that you are loading the "AAA" JSON data first, followed by the "BBB" JSON data. Based on the JSON, the "BBB" data is being drawn on top of the "AAA" data. We suggest loading the "BBB" JSON data first, followed by the "AAA" data. This will ensure that the "BBB" data is drawn first, allowing the "AAA" data to be drawn on top of it and preventing overlapping issues. We have shared a modified JSON file and output for your reference.

Output Screenshot:

Please let us know if you need any further assistance.

Regards,

Preethika Selvam. bd580689.zip

[aike1202]

@PreethikaSelvam thanks for your responding , change the order of json will show cruuectly but i think there is bug ,try load only BBB area it should be a quadrangular in BBB like this : but it Output like this ps: how to add ring in area https://docs.qgis.org/2.18/en/docs/user_manual/working_with_vector/editing_geometry_attributes.html#add-ring

[PreethikaSelvam]

Hi @aike1202,

We have found that the issue with the JSON data stemmed from the organization of coordinates within the MultiPolygon geometry. Each polygon's coordinates needed to be structured separately within the coordinates array to ensure both polygons were accurately depicted. We have rectified the issue by organizing the coordinates accordingly to draw both polygons. We have shared a modified JSON file and output for your reference below.

Modified JSON:

` "geometry": {

            "type": "MultiPolygon",

            "coordinates": [

                [

                    [

                        [

                            75.71942117984689,

                            39.274322001745936

                        ],

                        [

                            75.73666532825024,

                            38.356071099266948

                        ],

                        [

                            77.19258338914965,

                            38.342868548145617

                        ],

                        [

                            77.02876397931772,

                            39.325785007137213

                        ],

                        [

                            77.02876397931772,

                            39.325785007137213

                        ],

                        [

                            77.02876397931772,

                            39.325785007137213

                        ],

                        [

                            77.02876397931772,

                            39.325785007137213

                        ],

                        [

                            75.71942117984689,

                            39.274322001745936

                        ]

                    ]

                ],

                [

                    [

                        [

                            75.97107797060856,

                            38.988715793815281

                        ],

                        [

                            75.99480235715396,

                            38.646519856441103

                        ],

                        [

                            76.45534236744214,

                            38.648338575218027

                        ],

                        [

                            76.45372572852934,

                            39.000765858211672

                        ],

                        [

                            75.97107797060856,

                            38.988715793815281

                        ]

                    ]

                ]

            ]

        }

` Output Screenshot:

Please let us know if you need any further assistance.

Regards,

Preethika Selvam. bd580689 (2).zip

[aike1202]

@PreethikaSelvam thans for u responce it show the border currect , but i don`t think it is propert way to edit json file plese look out introduction of Polygons and MultiPolygons https://imfeld.dev/writing/introduction_to_geojson if u dont want to consider this u can close this issue ,i wil cahnge my json . thanks a lot for replying

[PreethikaSelvam]

Hi @aike1202,

We would like to inform you that when using MultiPolygon geometry, the coordinates of each polygon will render sequentially. For example, if you have coordinates for three polygons, the first polygon will render first, and the subsequent polygons will render on top of the previous polygon.

Regarding your query, if you are expecting an option to have the first coordinate as a fill and the rest as clipping, we would like to clarify that all the polygons' coordinates will be drawn within a single path. As a result, both polygons will be fully filled. This is a behavior, and there is no built-in option to have the first coordinate as a fill and the rest as clipping. This can only be overridden when the JSON is prepared with holes.

Please get back to us if you require further assistance.

Regards,

Preethika Selvam.

[aike1202]

@PreethikaSelvam I get u , Thanks for u answer ，it can fix my problem for now , but when I use real geoJosn data , it`s hard to modify json data ,cause in soma case geogson might be very big if im not wrong this is the usege of Polygons And MultiPolygons

if U still recommend us to modify geoson u can close this issue ,thans a lot

Regards, Aike

[PreethikaSelvam]

Hi @aike1202,

As per our previous update when we input coordinates for three polygons, they are all rendered within a single path, causing each polygon to be completely filled in.

Currently we don’t have support for a polygon clipping layer that would allow the first set of coordinates to define the fill area, while the subsequent sets function as clipping paths. However, we have considered your requirement as a new feature and already logged feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link: https://www.syncfusion.com/feedback/57361/provide-polygon-clip-layer-support

Regards,

Preethika Selvam.