Lightweight and powerful Map
widget for flutter, supporting different projections including EPSG4326/Mercator/WGS1984.
-
Written entirely in Dart. No plugins, No platform code, No native code.
-
Map is vendor-free. Meaning that you can choose any tile provider of your choice. Google Maps, Mapbox, OSM Maps and Yandex Maps are a few to name. You can also use this package with your own custom tiles, your own server, your own [sub]domain.
-
Support for vector tiles is under development in vt and cartography packages. Please checkout these packages to know more about the progress and open issues/tasks.
-
This package supports caching out of the box through cached_network_image and flutter_cache_manager packages.
The web demo contains several examples demonstrating different aspects and usages of the project. From interactivity to polyline rendering.
The source code of the demo app is available in the ./example
project.
If you find this project useful, please support me by buying me a pizza 🍕.
Tron Address:
TLtrEU4KT2bn5J87VWfs1QDrmB1aFQ1bja
Ethereum Address:
0xf8Da77e7BbE39be8c9e527289465Bf7219af58db
I do not accept Bitcoin due to its issues with sustainability and global warming.
I welcome contributions in all forms. One lightweight way you can contribute is to tell me that you're using Map, which will give me warm fuzzy feelings 🤩.
- [✓] Android
- [✓] iOS
- [✓] Web
- [✓] Windows
- [✓] Linux
- [✓] macOS
- [✓] Flutter 3 is supported.
In your pubspec.yaml
file add:
dependencies:
map: any
Then, in your code import:
import 'package:map/map.dart';
final controller = MapController(
location: const LatLng(0, 0),
zoom: 2,
);
MapLayout(
controller: controller,
builder: (context, transformer) {
return TileLayer(
builder: (context, x, y, z) {
final tilesInZoom = pow(2.0, z).floor();
while (x < 0) {
x += tilesInZoom;
}
while (y < 0) {
y += tilesInZoom;
}
x %= tilesInZoom;
y %= tilesInZoom;
//Google Maps
final url =
'https://www.google.com/maps/vt/pb=!1m4!1m3!1i$z!2i$x!3i$y!2m3!1e0!2sm!3i420120488!3m7!2sen!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0!23i4111425';
return CachedNetworkImage(
imageUrl: url,
fit: BoxFit.cover,
);
},
);
},
);
Please check out the example project/tab for a working sample.