xclud/flutter_map

Lightweight and powerful geographical Map widget for Flutter, supporting different layers and 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.

Demo

Web Demo

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.

Donation

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.

Contributing

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

Supported platforms

• [✓] Android
• [✓] iOS
• [✓] Web
• [✓] Windows
• [✓] Linux
• [✓] macOS
• [✓] Flutter 3 is supported.

Getting Started

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.