Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use leaflet "openstreetmap" with flutter?

I need help to integrate leaflet maps in flutter. The project I'm working on requires showing custom markers, animations, routes and drawings on the map. But I can't find any documentation or tutorials explaining this in flutter.

like image 906
Khalil LAABOUDI Avatar asked Apr 03 '20 12:04

Khalil LAABOUDI


People also ask

Does leaflet use Openstreetmap?

http://leafletjs.comIt is used for the main OSM website map, as well as on Flickr, Wikipedia mobile apps, foursquare, craigslist, IGN, Washington Post, The Wall Steet Journal, Geocaching.com, City-Data.com, StreetEasy, Nestoria and Skobbler among others.

Is leaflet and Openstreetmap free?

Leaflet is open source and free. However the examples on leaflet site use Mapbox to render map. Mapbox is more expensive than Google map (Mapbox pricing).


Video Answer


2 Answers

You can use flutter_map package for that. That's one of two most widely used maps packages (next to google_maps_flutter, which is obviously only for Google Maps).

https://github.com/johnpryan/flutter_map

It features all things that you need AFAIR.

like image 60
Albert221 Avatar answered Oct 13 '22 10:10

Albert221


You may check out the below Flutter Maps widget which allows you to render tiles from different services like OpenStreetMaps, Azure Maps, etc.

https://pub.dev/packages/syncfusion_flutter_maps

It has the features you have requested like markers, adding animations, drawing routes on the maps, highlight a region, etc. Check the below links for more details.

https://help.syncfusion.com/flutter/maps/markers

https://help.syncfusion.com/flutter/maps/vector-layers/polyline-layer#adding-polylines

like image 45
Mohamed Samsudeen Avatar answered Oct 13 '22 10:10

Mohamed Samsudeen