0
votes

I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.

First we'll have a interface that display statistics for our entire planet: https://google.com/covid19-map/?hl=en (Just like htisw)

Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.

Is it possible in Flutter Web?

I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)

https://pub.dev/packages/flutter_map

but it doesn't explicitly say that it supports Flutter Web.

I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider

But it didn't really display anything, maybe because a certain widget or function didn't work as expected.

According to your experience, which is the best way to achieve what I am looking for?

If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.

2

2 Answers

0
votes

enter image description here

Flutter_map doesn’t support flutter web.

0
votes

You may check out the below Flutter Maps widget which has support for all the platforms including web.

https://pub.dev/packages/syncfusion_flutter_maps

Regarding the requirements you have mentioned, you can try the below things.

  1. By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.

https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically

  1. With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.

https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer https://help.syncfusion.com/flutter/maps/shape#range-color-mapping