A Flutter map widget inspired by Leaflet

Related tags

Map dart leaflet flutter
Overview

CI Pub

flutter_map

A Dart implementation of Leaflet for Flutter apps.

Installation

Add flutter_map to your pubspec:

dependencies:
  flutter_map: any # or the latest version on Pub

Android

Configure your app to use the INTERNET permission in the manifest file located in <project root>/android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Usage

Configure the map using MapOptions and layer options:

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      center: LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      TileLayerOptions(
        urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        subdomains: ['a', 'b', 'c'],
        attributionBuilder: (_) {
          return Text("Β© OpenStreetMap contributors");
        },
      ),
      MarkerLayerOptions(
        markers: [
          Marker(
            width: 80.0,
            height: 80.0,
            point: LatLng(51.5, -0.09),
            builder: (ctx) =>
            Container(
              child: FlutterLogo(),
            ),
          ),
        ],
      ),
    ],
  );
}

Alternatively, initialize the map by specifying bounds instead of center and zoom.

MapOptions(
  bounds: LatLngBounds(LatLng(58.8, 6.1), LatLng(59, 6.2)),
  boundsOptions: FitBoundsOptions(padding: EdgeInsets.all(8.0)),
),

Azure Maps provider

To configure Azure Maps, use the following MapOptions and layer options:

Widget build(BuildContext context) {
  return new FlutterMap(
    options: new MapOptions(
      center: new LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      new TileLayerOptions(
        urlTemplate: "https://atlas.microsoft.com/map/tile/png?api-version=1&layer=basic&style=main&tileSize=256&view=Auto&zoom={z}&x={x}&y={y}&subscription-key={subscriptionKey}",
        additionalOptions: {
          'subscriptionKey': '<YOUR_AZURE_MAPS_SUBSCRIPTON_KEY>'
        },
      ),
      new MarkerLayerOptions(
        markers: [
          new Marker(
            width: 80.0,
            height: 80.0,
            point: new LatLng(51.5, -0.09),
            builder: (ctx) =>
            new Container(
              child: new FlutterLogo(),
            ),
          ),
        ],
      ),
    ],
  );
}

To use Azure Maps, set up an account and get a subscription key

Open Street Map provider

Configure the map to use Open Street Map by using the following MapOptions and layer options:

Widget build(BuildContext context) {
  return new FlutterMap(
    options: new MapOptions(
      center: new LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      new TileLayerOptions(
        urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        subdomains: ['a', 'b', 'c']
      ),
      new MarkerLayerOptions(
        markers: [
          new Marker(
            width: 80.0,
            height: 80.0,
            point: new LatLng(51.5, -0.09),
            builder: (ctx) =>
            new Container(
              child: new FlutterLogo(),
            ),
          ),
        ],
      ),
    ],
  );
}

Widget Layers

Use the new way to create layers (compatible with previous version)

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      center: LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      MarkerLayerOptions(
        markers: [
          Marker(
            width: 80.0,
            height: 80.0,
            point: LatLng(51.5, -0.09),
            builder: (ctx) =>
            Container(
              child: FlutterLogo(),
            ),
          ),
        ],
      ),
    ],
    children: <Widget>[
      TileLayerWidget(options: TileLayerOptions(
        urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        subdomains: ['a', 'b', 'c']
      )),
      MarkerLayerWidget(options: MarkerLayerOptions(
        markers: [
          Marker(
            width: 80.0,
            height: 80.0,
            point: LatLng(51.5, -0.09),
            builder: (ctx) =>
            Container(
              child: FlutterLogo(),
            ),
          ),
        ],
      )),
    ],
  );
}

Custom CRS

By default flutter_map supports only WGS84 (EPSG:4326) and Google Mercator (EPSG:3857) projections. The proj4dart package provides additional reference systems (CRS).

To use proj4dart, first define a custom CRS:

var resolutions = <double>[32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128];
var maxZoom = (resolutions.length - 1).toDouble();

var epsg3413CRS = Proj4Crs.fromFactory(
  code: 'EPSG:3413',
  proj4Projection:
      proj4.Projection.add('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs'),
  resolutions: resolutions,
);

Then use the custom CRS in the map layer and in WMS layers:

child: FlutterMap(
  options: MapOptions(
    // Set the map's CRS
    crs: epsg3413CRS,
    center: LatLng(65.05166470332148, -19.171744826394896),
    maxZoom: maxZoom,
  ),
  layers: [
    TileLayerOptions(
      wmsOptions: WMSTileLayerOptions(
        // Set the WMS layer's CRS too
        crs: epsg3413CRS,
        baseUrl: 'https://www.gebco.net/data_and_products/gebco_web_services/north_polar_view_wms/mapserv?',
        layers: ['gebco_north_polar_view'],
      ),
    ),
  ],
);

For more details, see the custom CRS README.

Run the example

See the example/ folder for a working example app.

To run it, in a terminal cd into the folder. Then execute ulimit -S -n 2048 (ref). Then execute flutter run with a running emulator.

Downloading and caching offline maps

This section provides an overview of the available caching tile providers. If you would like to provide preconfigured and prepackaged map tiles to your app users, see the 'Preconfigured Offline Maps' section below.

The two available options included in flutter_map

1. Use NetworkImage by using NonCachingNetworkTileProvider

Whilst the name might make you think differently, it is designed to prevent you from using it and expecting it to cache; because it doesn't.

The FlutterMap NonCachingNetworkTileProvider implementaion uses NetworkImage which should cache images in memory until the app restart (through Image.network). See the Image.network docs and NetworkImage docs for more details.

2. Using the cached_network_image dependency

This dependency has an ImageProvider that caches images to disk, which means the cache persists through an app restart. You'll need to include the package in your pubspec.yaml.

Create your own provider using the code below:

import 'package:cached_network_image/cached_network_image.dart';
class CachedTileProvider extends TileProvider {
  const CachedTileProvider();
  @override
  ImageProvider getImage(Coords<num> coords, TileLayerOptions options) {
    return CachedNetworkImageProvider(
      getTileUrl(coords, options),
      //Now you can set options that determine how the image gets cached via whichever plugin you use.
    );
  }
}

Then, add the CachedTileProvider TileProvider to the appropriate TileLayerOptions:

TileLayerOptions(
  urlTemplate: 'https://example.com/{x}/{y}/{z}',
  tileProvider: const CachedTileProvider()
)

Offline Maps using TileMill

This section provides instructions for preconfigured and prepackaged offline maps. To see how to setup caching and downloading, see the 'Dynamically Downloading & Caching Offline Maps' section above.

This guide uses an open source program called TileMill.

First, install TileMill on your machine. Then, follow these instructions.

Once you have your map exported to .mbtiles, you can use [mbtilesToPng][mbTilesToPngs] to unpack into /{z}/{x}/{y}.png.

Move this to assets folder and add the appropriate asset directories to pubspec.yaml. Minimum required fields for this solution are:

Widget build(ctx) {
  return FlutterMap(
    options: MapOptions(
      center: LatLng(56.704173, 11.543808),
      zoom: 13.0,
      swPanBoundary: LatLng(56.6877, 11.5089),
      nePanBoundary: LatLng(56.7378, 11.6644),
    ),
    layers: [
      TileLayerOptions(
        tileProvider: AssetTileProvider(),
        urlTemplate: "assets/offlineMap/{z}/{x}/{y}.png",
      ),
    ],
  );
}

A missing asset error will be thrown if the PanBoundaries are outside the offline map boundary.

See the flutter_map_example/ folder for a working example.

See also FileTileProvider(), which loads tiles from the filesystem.

Plugins

Roadmap

For the latest roadmap, please see the Issue Tracker

Comments
  • Vector support?

    Vector support?

    Hi, is there any plan to support Vector Tile format? (as per https://www.mapbox.com/vector-tiles/)

    Leaflet has support via https://github.com/Leaflet/Leaflet.VectorGrid

    enhancement Stale 
    opened by filipproch 104
  • LateInitializationError for MapState in map.dart

    LateInitializationError for MapState in map.dart

    I just upgraded to version 0.13.1 which solved already some LateInitializationErrors.

    Unfortunately I just found another one in map.dart.

    late final MapState _state;

    which is final but can be set to another value again:

    set state(MapState state) {
      _state = state;
      if (!_readyCompleter.isCompleted) {
        _readyCompleter.complete();
      }
    }
    
    bug non-fatal high priority 
    opened by SebastianEngel 89
  • Marker calulations are heavy

    Marker calulations are heavy

    Hi there! For quite a time, I'm reaserching performance of flutter_map when throwing a lot of markers at it

    Recently, I created a library for drawing markers on Canvas instead of widgets, and it's performing pretty well. You can check it out at dev branch (tho it uses flutter_map fork for now :grimacing: ) https://github.com/KanarekApp/flutter_map_fast_markers/tree/dev

    But it turns out, that, even if you don't draw makers at all, the calulations that translate LatLng to X Y position on the screen are taking me to <30 fps @5k markers (when not drawing them at all!)

    I copy-pasted the calulations from original markers, but I can modify them - however, I have no idea how.

    Does anyone have an idea how they could be optimized?

    bug non-fatal high priority 
    opened by TheLastGimbus 60
  • Show old tiles until new ones are downloaded

    Show old tiles until new ones are downloaded

    When a user zooms in enough, new, more zoomed in tiles are loaded and displayed. Would it be possible to show the images of the current layer until the new pictures are loaded instead of just showing a grey map while the new tiles are loading?

    bug 
    opened by vinicentus 52
  • Non user-friendly library πŸ›

    Non user-friendly library πŸ›

    This library has many errors while using it. One of them is LateInitializationError while using the controller of the map.

    There are also fields where require the controller. F.e. In MapOptions constructor and In FlutterMap constructor. No idea why MapOptions can provide a controller if controller can be created by user of this library.

    Stale 
    opened by II11II 45
  • Added MapController.pointToLatLng() to get LatLng of given screen point

    Added MapController.pointToLatLng() to get LatLng of given screen point

    I wanted to get LatLng of a given point on screen, but couldn't find an easy way to.

    So I've implemented a MapController.pointToLatLng() inspired by @maRci002's answer.

    Ref #496, ref #607, ref #981, ref #1010

    opened by HugoHeneault 44
  • The map is lagged when the polyline consists of a large number of points

    The map is lagged when the polyline consists of a large number of points

    Hi guys! I am experiencing performance problems when a polyline consists of a large number of points (for example, more than 7000 points), the map starts lagging and the FPS drops. Is there a way to increase productivity? For example, it would be possible to render only what is visible on the screen.

    bug non-fatal 
    opened by Vafin84 43
  • Documentation Improvements

    Documentation Improvements

    As discussed in thread https://github.com/fleaflet/flutter_map/discussions/927#discussioncomment-1002834, this PR will merge a whole new documentation for flutter_map, including:

    • Improved out-of-code documentation
    • Improved 'dartdoc' (inside code) documentation
    opened by JaffaKetchup 42
  • [BUG] Cannot Pan Vertically Inside `ListView`

    [BUG] Cannot Pan Vertically Inside `ListView`

    Describe The Bug Map inside ListView example not works as expected in android device.

    Expected Behavior Map scroll does not scroll the list view

    Screenshots & Recordings

    https://user-images.githubusercontent.com/36578847/179428019-3f8f6ff5-68cf-4c16-bf5a-77ce40383954.mp4


    Doctors Report

    [βœ“] Flutter (Channel stable, 3.0.3, on macOS 12.4 21F79 darwin-arm, locale
        es-419)
        β€’ Flutter version 3.0.3 at /Users/alejo/Documents/flutter
        β€’ Upstream repository https://github.com/flutter/flutter.git
        β€’ Framework revision 676cefaaff (4 weeks ago), 2022-06-22 11:34:49 -0700
        β€’ Engine revision ffe7b86a1e
        β€’ Dart version 2.17.5
        β€’ DevTools version 2.12.2
    
    [!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
        β€’ Android SDK at /Users/alejo/Library/Android/sdk
        βœ— cmdline-tools component is missing
          Run `path/to/sdkmanager --install "cmdline-tools;latest"`
          See https://developer.android.com/studio/command-line for more details.
        βœ— Android license status unknown.
          Run `flutter doctor --android-licenses` to accept the SDK licenses.
          See https://flutter.dev/docs/get-started/install/macos#android-setup for
          more details.
    
    [βœ“] Xcode - develop for iOS and macOS (Xcode 13.4.1)
        β€’ Xcode at /Applications/Xcode.app/Contents/Developer
        β€’ CocoaPods version 1.11.3
    
    [βœ“] Chrome - develop for the web
        β€’ Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [βœ“] Android Studio (version 2021.2)
        β€’ Android Studio at /Applications/Android Studio.app/Contents
        β€’ Flutter plugin can be installed from:
          πŸ”¨ https://plugins.jetbrains.com/plugin/9212-flutter
        β€’ Dart plugin can be installed from:
          πŸ”¨ https://plugins.jetbrains.com/plugin/6351-dart
        β€’ Java version OpenJDK Runtime Environment (build
          11.0.12+0-b1504.28-7817840)
    
    [βœ“] VS Code (version 1.69.0)
        β€’ VS Code at /Applications/Visual Studio Code.app/Contents
        β€’ Flutter extension version 3.44.0
    
    [βœ“] Connected device (3 available)
        β€’ SM A305G (mobile) β€’ R58M84Q30VV β€’ android-arm64  β€’ Android 11 (API 30)
        β€’ macOS (desktop)   β€’ macos       β€’ darwin-arm64   β€’ macOS 12.4 21F79
          darwin-arm
        β€’ Chrome (web)      β€’ chrome      β€’ web-javascript β€’ Google Chrome
          103.0.5060.114
    
    [βœ“] HTTP Host Availability
        β€’ All required HTTP hosts are available
    

    To Reproduce Run the example app


    Severity This will help us to label the issue quicker and decide what needs attention first. Only choose fatal if the entire app crashes, otherwise choose non-fatal.

    • [x] Non-Fatal
    • [ ] Fatal / App Crashes

    Frequency/Rarity This will help us to label the issue quicker and decide what needs attention first.

    • [ ] Once
    • [ ] Uncommon
    • [ ] Common
    • [x] Always

    Applicable Platforms Only select those that you've tested on - one or more. If possible, test on a variety of platforms.

    • [x] Android
    • [ ] iOS
    • [ ] Web
    • [ ] Windows
    • [ ] Others (beta platforms)
    bug non-fatal 
    opened by alejandrogiubel 34
  • The method 'move' was called on null.

    The method 'move' was called on null.

    Here is the stacktrace :

    ══║ EXCEPTION CAUGHT BY WIDGETS LIBRARY β•žβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•
    The following NoSuchMethodError was thrown building StreamBuilder<LatLng>(dirty, state:
    _StreamBuilderBaseState<LatLng, AsyncSnapshot<LatLng>>#d59a1):
    The method 'move' was called on null.
    Receiver: null
    Tried calling: move(Instance of 'LatLng', 18.0, hasGesture: false, isUserGesture: false)
    When the exception was thrown, this was the stack:
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
    #1      MapControllerImpl.move (package:flutter_map/src/map/map.dart:28:12)
    #2      SelfUpdatingMap.build.<anonymous closure> (package:car_park/util/self_updating_map.dart:58:22)
    #3      StreamBuilder.build (package:flutter/src/widgets/async.dart:425:74)
    #4      _StreamBuilderBaseState.build (package:flutter/src/widgets/async.dart:125:48)
    #5      StatefulElement.build (package:flutter/src/widgets/framework.dart:3825:27)
    #6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3739:15)
    #7      Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5)
    #8      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2278:33)
    #9      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
    #10     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
    #11     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
    #12     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
    #13     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:864:5)
    #17     _invoke (dart:ui/hooks.dart:219:10)
    #18     _drawFrame (dart:ui/hooks.dart:178:3)
    (elided 3 frames from package dart:async)
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    In fact, I get this error when I call move(...) on a MapController which is not affected to a map.

    opened by Skyost 34
  • Replace the flutter_image package with RetryClient from the http package

    Replace the flutter_image package with RetryClient from the http package

    Since flutter_image seems to have a very low priority from the flutter development team, I followed this tip and replaced the package with the RetryClient from the http package. I tested my pull request with the example app and it worked fine.

    The PR would also make flutter_map independent of flutter_image in the future.

    opened by josxha 32
  • [BUG] Using bounds creates map flicker

    [BUG] Using bounds creates map flicker

    What is the bug?

    The bounds fix at https://github.com/fleaflet/flutter_map/commit/678a8abcc9afce68b87f50fba8a16f61afa5e7e5 for https://github.com/fleaflet/flutter_map/issues/1362 allows the bounds to function correctly now, but now there is a frame flicker that looks quite bad on the web (since you're clicking between pages that load instantly) or when using map marker clustering via https://pub.dev/packages/flutter_map_marker_cluster.

    Regarding clustering, because the map loads in one state, and then quickly switches to another state (with another location, zoom level, etc.), it causes all the markers to animate and reposition.

    The issue is because the bounds are being fit after the map has already loaded:

        WidgetsBinding.instance.addPostFrameCallback((_) {
          // Finally, fit the map to restrictions
          if (options.bounds != null) {
            fitBounds(options.bounds!, options.boundsOptions);
          }
          options.onMapReady?.call();
        });
    

    What is the expected behaviour?

    The map bounds are set when the map loads and the map doesn't change or move after the map has loaded.

    How can we reproduce this issue?

    MapOptions(
      bounds: LatLngBounds([corner1, corner2]),
      boundsOptions: const FitBoundsOptions(
        padding: EdgeInsets.all(50),
        maxZoom: 20,
      ),
    ),
    

    Do you have a potential solution?

    If I recall, this worked as expected in 2.x.

    Can you provide any other information?

    No response

    Platforms Affected

    Android, iOS, Web, Windows, MacOS, Linux

    Severity

    Obtrusive: Prevents normal functioning but causes no errors in the console

    Frequency

    Consistently: Always occurs at the same time and location

    Requirements

    • [X] I agree to follow this project's Code of Conduct
    • [X] My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
    • [X] I am using the latest stable version of this package
    • [X] I have checked the FAQs section on the documentation website
    • [X] I have checked for similar issues which may be duplicates
    bug needs verification 
    opened by stx 4
  • fix for 1373, where bounds doesn't get updated after a mapController …

    fix for 1373, where bounds doesn't get updated after a mapController …

    For https://github.com/fleaflet/flutter_map/issues/1373

    I think setState gets called, but the onPositionChanged gets called before _bounds is updated (inside build). I've also added an extra check for a valid bounds check to be called on a test new bounds (we don't want to update _bounds if the new position is erm out of bounds).

    opened by ibrierley 2
  • [BUG] when onPositionChanged is called because of controller.move the position is before the move

    [BUG] when onPositionChanged is called because of controller.move the position is before the move

    What is the bug?

    When moving via controller.move() the onPositionChanged position attribute does not hold the correct bounds. The southwest and northeast corner are the same. When slightly moving the map again after the move the bounds are correct.

    What is the expected behaviour?

    The position attribute of the controller should hold the correct bounds

    How can we reproduce this issue?

    FlutterMap(
          options: MapOptions(
            onPositionChanged: onMapChanged,
          ),
    
    mapController.move(
                    pointOfIntrest,
                    mapController.zoom,
                  );
    
     void onMapChanged(MapPosition position, bool gesture) {
        if (_mapChangeDebounce?.isActive ?? false) {
          _mapChangeDebounce!.cancel();
        }
        _mapChangeDebounce = Timer(
          const Duration(
            milliseconds: 500,
          ),
          () {
            Provider.of<GeoProvider>(context, listen: false)
                .fetchSearchesInBoundingBox(
              position.bounds!.southWest!,
              position.bounds!.northEast!,
            );
          },
        );
    

    Do you have a potential solution?

    No response

    Can you provide any other information?

    No response

    Platforms Affected

    Android

    Severity

    Obtrusive: Prevents normal functioning but causes no errors in the console

    Frequency

    Consistently: Always occurs at the same time and location

    Requirements

    • [X] I agree to follow this project's Code of Conduct
    • [X] My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
    • [X] I am using the latest stable version of this package
    • [X] I have checked the FAQs section on the documentation website
    • [X] I have checked for similar issues which may be duplicates
    bug non-fatal 
    opened by SecretUnicorn 0
  • [BUG] fitting bounds throws Infinity or NaN toInt or does not fit map correctly

    [BUG] fitting bounds throws Infinity or NaN toInt or does not fit map correctly

    What is the bug?

    when fitbounds is called, we have to distinguish 2 cases:

    1. multiple points are given -> zoom level is not calculated correctly, it shows whole map
    2. one point is given -> Unsupported operation: Infinity or NaN toInt -> is thrown at following function:

    /// Create new [CustomPoint] whose [x] and [y] values are rounded down /// to int CustomPoint floor() { return CustomPoint(x.floor(), y.floor()); }

    What is the expected behaviour?

    Expected behavior is to show a map centered at the middle of the given LatLng points and to not throw an error.

    How can we reproduce this issue?

    class Maps extends StatefulWidget {
      final LatLng? initMarker;
      final List<LatLng> markers;
    
      Maps({Key? key, this.initMarker, required this.markers}) : super(key: key) {
        var multipleTestMarkrs = [
          LatLng(52.527194793354084, 13.371265245125935),
          LatLng(48.14384446905119, 11.57992496759276)
        ];
        var singleTestMarker = [LatLng(52.527194793354084, 13.371265245125935)];
        this.markers = singleTestMarker;
      }
    
      @override
      _MapsState createState() => _MapsState();
    }
    
    class _MapsState extends State<Maps> {
      bool hasMarkers() {
        return widget.markers.isNotEmpty;
      }
    
      @override
      Widget build(BuildContext context) {
        final options = MapOptions(
            interactiveFlags: InteractiveFlag.none,
            bounds: LatLngBounds.fromPoints(widget.markers),
            center: computeCentroid(widget.markers),
            maxBounds: LatLngBounds.fromPoints(widget.markers),
            screenSize: MediaQuery.of(context).size,
            boundsOptions: FitBoundsOptions(padding: EdgeInsets.all(20)));
    
        return hasMarkers()
            ? Container(
                height: 300,
                child: IgnorePointer(
                  child: FlutterMap(
                    options: options,
                    children: [
                      TileLayer(
                        retinaMode:
                            true && MediaQuery.of(context).devicePixelRatio > 1.0,
                        urlTemplate:
                            "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
                        subdomains: ['a', 'b', 'c'],
                      ),
                      MarkerLayer(
                        markers: [
                          for (var marker in widget.markers)
                            Marker(
                              width: 80.0,
                              height: 80.0,
                              point: marker,
                              builder: (ctx) => const Icon(Icons.pin_drop,
                                  color: StyleGuide.orange),
                            ),
                        ],
                      ),
                    ],
                  ),
                ),
              )
            : Container(
                decoration: const BoxDecoration(color: StyleGuide.orange),
                child: const Text("NO MAP TO SHOW"),
              );
      }
    
      LatLng computeCentroid(List<LatLng> points) {
        double latitude = 0;
        double longitude = 0;
        int n = points.length;
    
        for (LatLng point in points) {
          latitude += point.latitude;
          longitude += point.longitude;
        }
    
        return LatLng(latitude / n, longitude / n);
      }
    }
    

    Do you have a potential solution?

    No response

    Can you provide any other information?

    Unsupported operation: Infinity or NaN toInt

    #0 double.floor (dart:core-patch/double.dart) #1 CustomPoint.floor (package:flutter_map/src/core/point.dart:22:29) #2 FlutterMapState.getPixelBounds (package:flutter_map/src/map/flutter_map_state.dart:593:47) #3 FlutterMapState.move (package:flutter_map/src/map/flutter_map_state.dart:457:20) #4 FlutterMapState.fitBounds (package:flutter_map/src/map/flutter_map_state.dart:490:5) #5 FlutterMapState.initState (package:flutter_map/src/map/flutter_map_state.dart:47:7) #6 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5015:57)

    Platforms Affected

    Android, iOS

    Severity

    Erroneous: Prevents normal functioning and causes errors in the console

    Frequency

    Consistently: Always occurs at the same time and location

    Requirements

    • [X] I agree to follow this project's Code of Conduct
    • [X] My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
    • [X] I am using the latest stable version of this package
    • [X] I have checked the FAQs section on the documentation website
    • [X] I have checked for similar issues which may be duplicates
    bug needs verification 
    opened by typexy 6
  • Add parameter to fit to integer zoom levels

    Add parameter to fit to integer zoom levels

    Since flutter map is mostly used with pixel tiles, it is often desirable to use integer zoom levels in order to avoid any pixel tile upscaling. Currently this isn't possible using the fitBounds and centerZoomFitBounds methods.

    This PR adds an additional parameter to the FitBoundsOptions called forceIntegerZoomLevel in order to force the calculation of applicable integer zoom levels of the aforementioned functions.

    enhancement 
    opened by Robbendebiene 4
Releases(v3.0.0)
  • v3.0.0(Sep 5, 2022)

    What's Changed

    • Multiple changes - https://github.com/fleaflet/flutter_map/pull/1333
      • Removed deprecated APIs from v2
      • Removed old layering system
      • Added new layering system
      • Removed old plugin registration system
    • Added Polygon label rotation (countered to the map rotation) - https://github.com/fleaflet/flutter_map/pull/1332
    • Fixed missing widget sizing to fix multiple issues - https://github.com/fleaflet/flutter_map/pull/1334
    • Forced CRS changes to rebuild children - https://github.com/fleaflet/flutter_map/issues/1322
    • Allowed map to absorb gesture events correctly within other scrollables - https://github.com/fleaflet/flutter_map/issues/1308
    • Improved performance by harnessing the full power of Flutter widgets - https://github.com/fleaflet/flutter_map/issues/1165, https://github.com/fleaflet/flutter_map/issues/958

    Full Changelog: https://github.com/fleaflet/flutter_map/compare/v2.1.1...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Aug 2, 2022)

    What's Changed

    • Null-Safety Bug Fix & GitHub Actions Workflow Improvements by @JaffaKetchup in https://github.com/fleaflet/flutter_map/pull/1323
    • Add Rotation Capability To OverlayImage by @Robbendebiene in https://github.com/fleaflet/flutter_map/pull/1315
    • Stricten Lints & Fix Tests Exceptions by @lsaudon in https://github.com/fleaflet/flutter_map/pull/1319
    • Added latLngToScreenPoint and refactored pointToLatLng by @ibrierley in https://github.com/fleaflet/flutter_map/pull/1330
    • Prepared For v2.2.0 Release by @JaffaKetchup in https://github.com/fleaflet/flutter_map/pull/1324

    Full Changelog: https://github.com/fleaflet/flutter_map/compare/v2.1.1...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Jul 25, 2022)

    What's Changed

    • Migrate To Issue Forms by @JaffaKetchup in https://github.com/fleaflet/flutter_map/pull/1309
    • dispose AnimationController by @rbellens in https://github.com/fleaflet/flutter_map/pull/1303
    • [v2.1.0] Fixes For Polar Projection by @JosefWN in https://github.com/fleaflet/flutter_map/pull/1295
    • [v2.1.0] Fix LateInitializationError with MapController by @Zverik in https://github.com/fleaflet/flutter_map/pull/1293
    • v2.1.0 Release & Keep Alive Functionality by @JaffaKetchup in https://github.com/fleaflet/flutter_map/pull/1312
    • Fixed Null-Safety Errors by @JaffaKetchup in https://github.com/fleaflet/flutter_map/pull/1318

    New Contributors

    • @rbellens made their first contribution in https://github.com/fleaflet/flutter_map/pull/1303
    • @JosefWN made their first contribution in https://github.com/fleaflet/flutter_map/pull/1295

    Full Changelog: https://github.com/fleaflet/flutter_map/compare/v2.0.0...v2.1.1

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jul 11, 2022)

    This update adds improved header functionality, and includes breaking changes to TileProviders. Other changes and bug fixes have also been made.

    For migration instructions, see https://docs.fleaflet.dev/migration/to-v2.0.0 For changelog, see https://github.com/fleaflet/flutter_map/blob/master/CHANGELOG.md For code comparison, visit https://github.com/fleaflet/flutter_map/compare/v1.1.1...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Jun 25, 2022)

    This update marks the full release of the new documentation website, designed to make your development with flutter_map easier! Visit the new documentation today: https://docs.fleaflet.dev/.

    There are no functionality/API changes associated with this update.

    Source code(tar.gz)
    Source code(zip)
Owner
null
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Sep 24, 2022
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster

Flutter Map Marker Cluster A Dart implementation of Leaflet.markercluster for Flutter apps. This is a plugin for flutter_map package Usage Add flutter

Lorenzo Pongetti 168 Sep 28, 2022
Stateful map controller for Flutter Map

Map controller Stateful map controller for Flutter Map. Manage markers, lines and polygons. View the web demo Usage import 'dart:async'; import 'packa

null 55 Sep 15, 2022
A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC.

A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC. Through the combination of 5g + AI, colle

null 24 Jan 14, 2022
Custom map markers - Custom Map Markers Using Flutter

Custom Map Markers Not only "Everything is a widget" also "Everywhere is a widge

null 6 Sep 19, 2022
Customized google map with widget markers. Enables to show markers with widget code.

widget_marker_google_map Google map with widget markers. Set up Follow the steps on google_maps_flutter document. Usage Same as google_maps_flutter ex

Santa Takahashi 6 Jun 17, 2022
A map widget with live position updates for Flutter

Livemap A map widget with live position updates. Based on Flutter map and Geolocator. Provides a controller api to handle map state changes. Example i

null 45 Sep 28, 2022
A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

Boris Gautier 5 Sep 14, 2022
A flutter package for select a city from svg map.

City Picker From Map A flutter package for select a city from svg map. Supported countries (+150) are here. Screenshots Getting Started In the pubspec

Ahmet Γ‡ELΔ°K 45 Sep 24, 2022
Flutter Tutorial - Google Map with Live Location Tracking

Flutter Tutorial - Google Map with Live Location Tracking Build Google Map app with Live Location Tracking in Flutter. ✌   App Preview Android Preview

Samuel Adekunle 11 Jul 15, 2022
Map Picker for Flutter

Map Pin Picker A Vendor-free map Library for Easy and Quick Usage. Follow the steps to integrate Google Maps (https://pub.dev/packages/google_maps_flu

Akbar 16 Jul 15, 2022
Flutter Google Map Example - Day 41

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter Google Map Exa

Mohammad Rahmani 66 Sep 10, 2022
Flutter plugin to display a simple flat world map with animated points in real time

Flutter Simple Map Flutter plugin to display a simple flat world map with animated points in real time. Can be used as a presentation of online users,

Vladyslav Korniienko 5 Aug 22, 2022
🌍 Map location picker component for flutter Based on google_maps_flutter

google_map_location_picker Location picker using the official google_maps_flutter. I made This plugin because google deprecated Place Picker. Using Pu

Ibrahim Eid 185 Sep 6, 2022
Flutter Google Map Example

Flutter Google Map Example A Flutter application demonstrate google map. Preview Listener and Marker Compass MapTypes Plugin google_maps_flutter from

Bhavik Makwana 67 Sep 14, 2021
A Flutter package for place search using MapBox Api and for Static map image

About This package provides easy api calls to MapBox Search API. Also, it contains an static map image generator ?? . Maki Icons can be used now in ma

Ketan Choyal 63 May 20, 2022
How To Integrate Customized Google Map inΒ Flutter

How To Integrate Customized Google Map in Flutter Let’s develop a customised Google Maps for the best user experience. Visit : https://medium.com/flut

Jaimil Patel 17 Sep 21, 2022
Flutter Aris Map Application

Flutter Aris Map Application Version 1️⃣ . 0️⃣ . 0️⃣ βž• 1️⃣ 4️⃣ Getting Started $ git clone https://github.com/ariscybertech/aris_map.git $ flutter pac

Behruz Hurramov 5 Jan 24, 2022
A google map example for flutter

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOf

Behruz Hurramov 5 Apr 23, 2022