thihas0ehtet / flutter_map Goto Github PK

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.

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.

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.