how to get this Shapes on the sfMap given google map image sample ...?

[MukeshWrms]

Use case

This is my response how can set the direct of given polygon with MULTIPOLYGON achievement on the sfMap.

i have check the all example with sfMap is not getting on this.

{
"status": "success",
"List": {
"graph_report": [
{

    "polygon": {
      "polygon": "MULTIPOLYGON(((-73.885971069336 18.589305877686, -73.887084960937 18686035, -73.811248779297 18.605140686035, -73.811248779297 18 8 8.630138397217, -73.785415649414 18.629861831665, -73.785697937012 18.629861831665, -73.785697937012 18.629583358765, -73.785972595215 18.629583358765, -73.785972595215 18.629028320312, -73.786247253418)))",
      "centroid_x": "",
      "centroid_y": "",
      "boundingbox": [
        [
          -74.48124694824219,
          18.356925964355582
        ],
        [
          -73.69847106933594,
          19.00013923645031
        ]
      ]
    },
    "x_level": "level2"
  },
  ],

},
"message": "data found"
}

Proposal

how to achievement on this on sf map with given our json directly without store json and store map.

[MukeshWrms]

Please update sir @VijayakumarMariappan ...?????

[AswiniDileep]

Hi @MukeshWrms,

We have reviewed your query, and you can achieve your requirement of mapping with your given JSON data directly, without storing the JSON and map. This can be done by adding the required polygons to MapPloygon in MapShapeLayer or MapTileLayer. The polygon layer is a sublayer that renders a group of MapPolygon elements on both MapShapeLayer and MapTileLayer.

We have shared the links below for your reference. For more information, please refer to it.
• Adding polygons in Flutter Maps widget | Syncfusion
• MapPolygon class - maps library - Dart API (pub.dev)

If you have further queries, please get back to us.

Regards,
Aswini.

[LavanyaGowtham2021]

Please let us know if you need further assistance on this.

[MukeshWrms]

@LavanyaGowtham2021 @VijayakumarMariappan @AswiniDileep

this is not working for above steps, and we have used the geojson url loading process very much time for example we have used the delhi jeoJSON url, and background map
MapTileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',

          initialZoomLevel: 3), 

MapShapeLayer(
source: _dataSource,
//showDataLabels: true,
color: Colors.blue[100],
strokeColor: Colors.blue,
strokeWidth: 2,
loadingBuilder: (BuildContext context) {
return Container(
height: 25,
width: 25,
child: const CircularProgressIndicator(
strokeWidth: 3,
),
);
},
),

void initState() {
_dataSource = MapShapeSource.network(
'https://xxxxxxxxURL.com/geoJsonFilesFolder/state1_1.json',
)

is not load on the my phone (android / ios).

please give the helpful sample with MapTileLayer tile

[MukeshWrms]

hi sir ,
@VijayakumarMariappan @LavanyaGowtham2021

String url;
for (int i = 0; i < dataInfo.length; i++) {
url = 'https:xyz.com/geoJsonFiles/level1_' +
dataInfo[i].level2Id.toString() +
'.json';

_dataSource = MapShapeSource.network(
url,
// shapeDataField: 'name',
dataCount: dataInfo.length,
primaryValueMapper: (index) => dataInfo[index].level1Name.toString(),
);
}

SfMaps(
layers: [
MapTileLayer(
urlTemplate:
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
zoomPanBehavior: _zoomPanBehavior,
initialFocalLatLng:
MapLatLng(77.606, 30.925),
sublayers: [
MapShapeSublayer(
source: _dataSource!,
color: Colors.grey.withOpacity(0.5),
strokeColor: Colors.black,
strokeWidth: 2,
selectedIndex: _selectedIndex,
onSelectionChanged: (int index) {
setState(() {
_selectedIndex = index;
});
},
selectionSettings: MapSelectionSettings(
color: Colors.red.withOpacity(0.7),
strokeColor: Colors.red[700],
strokeWidth: 3,
),
),
],
),
],
),

we have using the loop, this array is hold 3 row but generated only last index(one) source on map other two shape is not update at the map with for loop.

please help on this. how can do this.

[MukeshWrms]

@LavanyaGowtham2021 @VijayakumarMariappan

Sir please give the solution is very urgent.

[MukeshWrms]

@LavanyaGowtham2021 @VijayakumarMariappan

Sir please give the solution is very urgent.

[MukeshWrms]

sir, please update @LavanyaGowtham2021 @VijayakumarMariappan

[ghost]

Hi @MukeshWrms ,

We have reviewed your query and observed that the issue arises because the MapShapeSubLayer data source is loaded within the initState using loop, which results in only the last dataset being replaced in _dataSource. This is why only the last shape layer is rendered.

To address this, we have prepared a simple sample where multiple MapShapeLayer instances are created using a loop and stored in a list. These layers are then assigned to the sublayers property of the map. We have attached sample and please modify it based on your code accordingly to meet your specific requirements.

Please feel free to reach out if you need further clarification or assistance.

Sample : gh_2083.zip

Regards,
Thilip Chandru.

[MukeshWrms]

@LavanyaGowtham2021 @ThilipChandru @VijayakumarMariappan

Dear Sir, i have check your sample but its not fulfilled our requirement's, we have not used the map
MapShapeSource.asset( ) function, because different-2 user difference location map on the dynamic level.
i have used the MapShapeSource.network( ) like as google map (https://developers.google.com/maps/documentation/javascript/examples/layer-data-event) this is used with the loop for generate a map MultiPolygon and Polygon in our website api so we have used like this.

i need like below function.this function generated with chatgpt
but MapShapeSource.shapeData() this function is not available in your sfMap.

Sir please update on that....

Thanks
Mukesh

ChatGPT -> sfmap used to jeojson mulipal url in flutter

class MapSample extends StatefulWidget {
@OverRide
_MapSampleState createState() => _MapSampleState();
}

class _MapSampleState extends State {
late MapShapeSource _mapSource;
late Future _loadGeoJsonFuture;

@OverRide
void initState() {
super.initState();
_loadGeoJsonFuture = _loadGeoJson();
}

Future _loadGeoJson() async {
// Example GeoJSON URLs
List geoJsonUrls = [
'https://your-first-geojson-url.com/geojson1', // Replace with your URLs
'https://your-second-geojson-url.com/geojson2',
];

List<Map<String, dynamic>> allGeoJsonFeatures = [];

for (String url in geoJsonUrls) {
  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    Map<String, dynamic> geoJsonData = jsonDecode(response.body);
    allGeoJsonFeatures.addAll(geoJsonData['features']);
  } else {
    print('Failed to load GeoJSON from $url');
  }
}

setState(() {
  _mapSource = MapShapeSource.shapeData(
    source: allGeoJsonFeatures,
    shapeDataField: 'id',  // Field in GeoJSON to uniquely identify shapes
  );
});

}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SfMaps with Multiple GeoJSONs'),
),
body: FutureBuilder(
future: _loadGeoJsonFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error loading GeoJSON data.'));
}

      return SfMaps(
        layers: [
          MapShapeLayer(
            source: _mapSource,
            strokeColor: Colors.black,
            strokeWidth: 2,
            color: Colors.blue.withOpacity(0.3),
            showDataLabels: true,
          ),
        ],
      );
    },
  ),
);

}
}

[MukeshWrms]

sir please update
@LavanyaGowtham2021 @ThilipChandru @VijayakumarMariappan

[MukeshWrms]

sir please update
@LavanyaGowtham2021 @ThilipChandru @VijayakumarMariappan

[Mugunthan-Ramalingam]

Hi @MukeshWrms,

We have validated your query, and you can achieve your requirement by considering the following key points.

• You can get the correct JSON from trusted online providers. We have shared a link to one such provider for your reference.
  storage.googleapis.com/maps-devrel/google.json
• Then, use the MapShapeSource.network method to load GeoJSON data from the URL. This approach dynamically adds sublayers to the map, where each sublayer represents features from the GeoJSON. The implementation utilizes the MapTileLayer to display the map and overlays the GeoJSON data using the sublayers. we have attached the sample for your reference and please modify it based on your requirements.

Please check and get back to us if your require further assistance.

Output screenshot:

Sample: gh_2083.zip

Note:
Please check the licensing of any providers before getting JSON from them.

Regards,
Mugunthan.