Flutter: Map with image overlay

Question

I'm actually working on a web project where a Map (Leaflet) is displayed with an image in overlay. On the web application, the user is able to move the image to match exactly the fingerprint of the building on the Leaflet map. Once the image is placed, we are able to store the exact location of the image thanks to the 3 GPS coordinates of 3 corners of the image.

Now, i would like to add this image by using the 3 corners coordinates on a map in the mobile application. I'm interested in Flutter but before going further, I would like to know if this implementation is do-able using Flutter.

Here is an example of the image placed on the web app:

Here is an example of the 3 corners coordinates associated to the image:

"corner1": {
       "type": "Point",
       "coordinates": [48.44125015626304, -4.412910623650533]
},
"corner2": {
       "type": "Point",
       "coordinates": [48.44194275959914, -4.412734794896097]
},
"corner3": {
        "type": "Point",
        "coordinates": [48.441223035155275, -4.412648068391719]
}

So, globally, i would like to display an image in overlay at these exact position on a mobile app, and if possible, using Flutter.

Answer 1

Flutter have a WebView in which you can display a Leaflet map. I have used Leaflet on mobile via Cordova and Leaflet in a WebView is something you can do if you prefer to stay with Leaflet rather than going with Google Maps.

I don't know how fast the WebView is in flutter but would expect it to get similar performance to as if you would use Cordova which for your application looks like you will get good enough performance.

What will may cause trouble though is if you have A LOT of vector data to render on a mobile device. Then you need to do that rendering in a tile server that your Leaflet map consumes.