14

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:

enter image description here

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.

wawanopoulos
  • 9,614
  • 31
  • 111
  • 166
  • Not really answering your question but you could use 2 opposed corners instead of 3 to define the rectangle. It is definitely possible to this using flutter_map plugin but would require you to do some coding. – Antonin GAVREL Jul 25 '20 at 02:56

2 Answers2

2

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.

L--
  • 286
  • 5
  • 7
1

The plugin for maps in Flutter google_maps_plugin seems that now supports polygons as it shown in this commit polygon overlays. That would help you to achieve that image overlay. Hope it helps!

Check this example: polygons

Sergio Bernal
  • 2,126
  • 9
  • 20