Getting shapeSource data directly from .json

Question

Hello, I was wondering if there was a way to get shapeSource data directly from my geoJson. From looking online I see examples https://blazor.syncfusion.com/documentation/maps/populate-data like this one where population data is stored in a separate JSON file.

For example, my JSON file is set up like this:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "COLOR": "#ffd700",
        "NAME": "L10 Working",
        "ABBREVIATION" : "LW"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-31.721048951149,40.284317829742655],

So I was wondering if I could pull the values from the "properties" section and then bind them to the DataSource property directly without the use of a separate JSON file.

For example, I'd like to use the COLOR value to set the color of the shape and use the value for ABBREVIATION as a tooltip for the shape. Hopefully, this makes sense. Thanks in advance.

Marismathan Gurusamy · Accepted Answer

Hi Sue,Greetings from Syncfusion. We've gotten to the point where we can
grab values from the "properties" part of JSON and bind them straight
to the data source property without having to utilize a separate JSON file. We've
achieved that situation and have shared the main file as well as the JSON we utilized
below. Kindly go through those and get back to us if you have further queries.Thanks,Marismathan GAttachment: Maps_JSON_query_358a8e84.zip

SueAnn · Answer

Okay, I have done more research and feel like I am close to doing this.

I have a MapModel class as follows:

class MapModel {
  //data type
  String? name; //can be null
  Color? color;

  //constructor
  MapModel(this.name, this.color);

  //method that assigns values to respective datatype variables
  MapModel.fromJson(Map<String,dynamic> json){
    name = json["NAME"];
    color = json["COLOR"];
  }
}

Then I have a late initialized variable _mapData as follows:

@override
void initState() {
  super.initState();
  //_mapData = readJson() as List<MapModel>; //await will wait for Future to get complete
  _asyncMethod();
  _shapeSource = MapShapeSource.asset('assets/uvu_map_updated.json',
      shapeDataField: 'NAME',
      dataCount: _mapData.length,
      primaryValueMapper: (int index) => _mapData[index].name!, //! means you know value will never be null
      dataLabelMapper: (int index) => _mapData[index].name!,
      shapeColorValueMapper: (int index) => _mapData[index].color
  );
  _zoomPanBehavior = MapZoomPanBehavior();
}

_asyncMethod() async{
  _mapData = await readJson();
}

But I am getting an error LATEINITIALIZATIONERROR that my _mapData has not been initialized.