How to spot different locations with colors on Map?

Question

Let me tell you what my motive is. I am making an app in which the locations which are highly affected by COVID is displayed by red, orange, and green colors. They are actually containers which are circular in shape and of these three colors. But, I am not getting the output as I have created this. Please see the code:-

import 'package:flutter/material.dart';
import 'package:latlong/latlong.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MapIntegration extends StatefulWidget {
  @override
  _MapIntegrationState createState() => _MapIntegrationState();
}

class _MapIntegrationState extends State {
  List redZoneData = new List();
  List orangeZoneData = new List();
  List greenZoneData = new List();
  Map overallData = {
    "Gujarat": LatLng(20.5937, 78.9629),
    "Dehi": LatLng(20.5937, 78.9629)
  };
  int n = 2;
  Map mapData;
  var totalConfirmed;
  var dataCalc;
  var death;
  var stateCode;
  mapDataValue() async {
    final url = 'https://api.rootnet.in/covid19-in/stats/latest';
    final response = await http.get(url);
    mapData = json.decode(response.body);
    if (response.statusCode == 200) {
      setState(() {
        for (int index = 0;
            index < mapData['data']['regional'].length;
            index++) {
          totalConfirmed = mapData['data']['regional'][index]['totalConfirmed'];
          death = mapData['data']['regional'][index]['deaths'];
          dataCalc = double.parse((totalConfirmed / death).toStringAsFixed(2));
          stateCode = mapData['data']['regional'][index]['loc'];
          if (dataCalc <= 40.00) {
            redZoneData.add(stateCode);
          } else {
            // print(stateCode);
            if (dataCalc > 40.00 && dataCalc <= 50.00) {
              orangeZoneData.add(stateCode);
            } else {
              greenZoneData.add(stateCode);
            }
          }
        }
        print(redZoneData);
        print(orangeZoneData);
        print(greenZoneData);
      });
    } else {
      throw Exception('loading failed...');
    }
  }

  Widget dataEvaluation() {
    var marker;
    for (int index = 0; index < mapData['data']['regional'].length; index++) {
      if (redZoneData.contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
            ),
          ),
        );
      } else if (orangeZoneData
          .contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.orange,
            ),
          ),
        );
      } else if (greenZoneData
          .contains(mapData['data']['regional'][index]['loc'])) {
        marker = new Marker(
          width: 80.0,
          height: 80.0,
          point: new LatLng(20.5937, 78.9629),
          builder: (ctx) => new Container(
            height: 10,
            width: 10,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.green,
            ),
          ),
        );
      }
    }
    return marker;
  }

  @override
  void initState() {
    mapDataValue();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height / 1.3,
      child: Column(
        children: [
          Container(
            decoration: new BoxDecoration(
              borderRadius: new BorderRadius.circular(30.0),
            ),
            height: MediaQuery.of(context).size.height / 1.5,
            alignment: Alignment.centerRight,
            child: FlutterMap(
              options: new MapOptions(
                center: LatLng(22.5937, 78.9629),
                zoom: 4.3,
              ),
              layers: [
                new TileLayerOptions(
                  urlTemplate:
                      'https://api.mapbox.com/styles/v1/shivam7007/ckevbwl2u6ty11an4bfbicex7/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2VsMzRrcmcweW9vMnlwaXNiMzFrYjV2In0.CVRHP4CkMz_5UybuZ3CaIA',
                  additionalOptions: {
                    'acessToken':
                        'pk.eyJ1Ijoic2hpdmFtNzAwNyIsImEiOiJja2V0bXl4OXIxbmRrMnRvZWdkaWM5a29zIn0.doc-sYseA4b-Z7ylnp0Ttg',
                    'id': 'mapbox.mapbox-streets-v8',
                  },
                ),
                new MarkerLayerOptions(
                  markers: [
                    dataEvaluation(),
                  ],
                ),
              ],
            ),
          ),
          Text('$dataCalc'),
        ],
      ),
    );
  }
}

And calling dataEvaluation() in MarkerLayerOption widget throws an error called "The element type 'Widget' can't be assigned to the list type 'Marker'." Actually I have created a function calling dataEvaluation() which will calculate whether the STATE is present in the red, orange, or green zone, and according to that it will return the container based on the color red, orange, or gree, and that container will work as a spot on the map. Please solve this, if you are finding any difficulty in understanding the question then please let me know. But please solve this. I am stuck finding nowhere. API is = https://api.rootnet.in/covid19-in/stats/latest

How to spot different locations with colors on Map?

Answers (1)

Related Questions