We Keep Coding

How can I display OSM maps in Flutter 'Web'?

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.

Flutter_map doesn’t support flutter web.

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.
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
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

Mapbox Tile Loading Issue

While using mapbox maps, When we move the map, zoom-in and zoom-out to locations, after a certain point of time, the new images of map stop loading.
When i checked on console, the new tiles server requests stay in pending state.
This also happens with the map in the sample map at https://www.mapbox.com/mapbox.js/example/v1.0.0/
Just keep using it for a while and make rapid zoom-in and zoom-outs in the map.
Note that this is not an internet bandwidth issue, and i am also using the paid version of mapbox.
My configuration is:
Browser: Chrome Version 45.0.2454.85 m
OS: Windows 8 Pro
Mapbox version: 2.2.2

I could not reproduce this, however I had a similar issues with the tiles not loading. It turned out to be due to a div I had covering part of the map area. It seems like mapbox can detect if there is an object over the map area and will not load the tiles.
Just an idea, hope it helps.

Just diagnosed this in our office. Updating Chrome to the most recent version (48) OR disabling Tampermonkey solved the problem. As per https://github.com/Leaflet/Leaflet/issues/3198, other extensions may also trigger the same Chrome bug.

Workaround for the grey area around the map on zoom out

I am using Google Maps Javascript API for rendering a map. When we zoom out on the map there is a brief moment that we see a grey area (while waiting for new tiles). Is there any workaround for this behavior in order to provide a similar user experience as mobile devices (Google Maps SDK Android and Iphone), where we always see a map on zoom out and not that brief grey area around the map?

The grey area around the map exists because it takes time to access the image tiles over the Internet connection from the server. My presumptiosn as to the reason why the mobile version does not do this are either that they have a special function that accesses the cache instead of re-querying the image on mobile, or that mobile simply has a built-in cache of, say, the entire world at zoom levels 0-3.
In other words, I do not know of a way to avoid the grey space. To get a work-around would require re-writing a good portion of Google's code, specifically to access the browser's cache. Even if you did succeed, a first-time user of the webpage would still get the grey space simply because a cache does not already exist.
My advice is to ignore it, as it is "brief" (and likely will not have much of any impact on the user experience), and that there are no easy fixes.

Map displaying properly only on window change

I am working on a project that makes use of a map engine from some private company that I can't mention here.
The system used to be in JQuery, and we recently made some considerable modifications, and the system is now implemented in AngularJS.
On the left side of the screen, we have a slidebar displaying items.
On the right side of the screen, we have the map.
My issue is that when I load the page, the map does not display properly, and the inside overlay is quite small. I have checked their sizes but they are correct.
However, when I resize the window manually, or open the Element Inspector from G. Chrome, the map then gets displayed completely.
I have attempted to redraw the clusterLayer, resize the map, resize the div of the map, but nothing seems to be working.
I found this post Google map does not display properly, it could have solved my problem, but I don't have any power on how the map gets loaded.
Thanks

I had a similar problem with ol3 in conjunction with angular. My workaround was to add:
$(document).ready(function () {map.updateSize()});
With map being my ol3 map object. In this case I did not use the openlayers directive from angular. Which, by the way, when used did not have the displaying problems.
Maybe that helps.

I've had somewhat a similar problem and none of the solutions provided worked for me. So I used timeOut function like this and it worked:
setTimeout(function() {
$scope.$apply(function(){
map.updateSize();
})
});

How can I access, then animate an existing leaflet map polyline using Javascript?

Can anyone suggest how I can access then animate the red polyline here using javascript:
http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')
I want to animate the polyline from the first marker to the end of the red line (think Indiana jones but without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.
I need thew solution to work in FF, IE7+ & Chrome
I am using cloudmade's leaflet maps and am keen to avoid using google maps.
There is further information in my related question at gis.stackexchange

I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)
Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/
I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)

I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.