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 65
  • 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
  • Grey screen on zoom

    Grey screen on zoom

    The map Is getting greyed out on deeper zoom. Tried using OpenStreetMap tile as well as Mapbox tile. Also tried on other devices, getting same issue. Tried on different android versions, same issue appears.

    • Flutter v2.5.3
    • flutter_map v0.14.0

    https://user-images.githubusercontent.com/29268397/142050534-1830f91a-5077-4fc5-8a20-112f57d7d904.mp4

    question/help 
    opened by hiteshgarg002 32
  • Improve polyline framerate for map moves, i.e. panning (performance i…

    Improve polyline framerate for map moves, i.e. panning (performance i…

    …s unchanged for zooming/rotating), by reducing repaints and doing less work on the critical path.

    This is a pretty straight forward change (with some opportunistic cleanups).

    I noticed https://github.com/fleaflet/flutter_map/pull/1381 as a "competing" approach for the Polygon layer. Note that my approach should likely also work in a straightforward fashion for the PolygonLayer w/o the need for any batching. I'm not sure how well they'd be combinable, i.e. avoiding repaints of clustered draws in the light of culling.

    Anyway, I'm getting significantly improved draw times (and thus frame rates):

    • Before: Screenshot_2022-12-27-22-11-32-55_1b269ddfa23dc77342248c30e8616ea5
    • After: Screenshot_2022-12-27-22-32-26-03_1b269ddfa23dc77342248c30e8616ea5
    opened by ignatz 2
  • [BUG] Transparently filled `Polyline` becomes black

    [BUG] Transparently filled `Polyline` becomes black

    What is the bug?

    A Polyline with color set to Colors.transparent seems to turn black. See the video for more precision: screen-capture.webm. ~Guess my email is leaked now :D~

    Interestingly, when transparent, it covers the border of another line.

    Occurs on latest version and on previous version. Cannot confirm previous to that.

    What is the expected behaviour?

    It should stay transparent.

    How can we reproduce this issue?

    Just make a transparent Polyline and put it on a map.

    Do you have a potential solution?

    No response

    Can you provide any other information?

    Selected all platforms, because this is unlikely to be a platform specific issue. See the video above for more detail.

    Platforms Affected

    Android, iOS, Web, Windows, MacOS, Linux

    Severity

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

    Frequency

    Often: Occurs more often than when it doesn't

    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 JaffaKetchup 0
  • Freezing while zooming in with dotted line polygons on map

    Freezing while zooming in with dotted line polygons on map

    What is the bug?

    When using a polygon with dotted line on a map with a large zoom value (16/17 for me), the map becomes unreactive, and the larger the zoom the worse the performance of the application. It looks like it doesn't cut the polygon line and draws all the points of the line / polygon, even outside the visible area.

    What is the expected behaviour?

    The map should run smoothly at all times.

    How can we reproduce this issue?

    Zoom in in example app when checking out polygons.
    

    Do you have a potential solution?

    Probably not drawing objects outside map borders. Also meybe some cutting them by border line would improve it even more. Just check if parts of polygon are in visible screen.

    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 
    opened by RMaciuszonek 14
  • MacOs Zoom In and Out not working with mouse scrolling

    MacOs Zoom In and Out not working with mouse scrolling

    What is the bug?

    • In macOS when I tried to zoom in or out with the mouse scrolling button then it's not working.
    • It's moving the up, down, left, right.
    • Whereas the same class working when I tried to run on Web.

    What is the expected behaviour?

    • When I scroll it should be zoom in or out same as web.

    How can we reproduce this issue?

    - Launch app in any MacOs and scroll with the help of mouse.
    

    Do you have a potential solution?

    No response

    Can you provide any other information?

    Below video is of MacOs which have issue while scrolling

    https://user-images.githubusercontent.com/34390549/206010996-e0b71e55-c451-4322-b236-83d5ed01ff3f.mov

    Below Video is for Web where with the help of scrolling it's working

    https://user-images.githubusercontent.com/34390549/206011598-c6c12dd1-6038-4ced-bf76-3f9c9a17a89c.mov

    Platforms Affected

    MacOS

    Severity

    Minimum: Allows normal functioning

    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 rohanjariwala03 3
  • [FEATURE]

    [FEATURE]

    What do you want implemented?

    Something lik eventEndZoom. Now zoom in mapState is changing all the time during MapEvent, and it's triggering children rebuilds every time. Would be great to have some helpful eventEndZoom to use it in children layers. Zoom will be changed only after event's end, but not changing during event. For example, if I`m changing zoom from 10 to 20 by one gesture, I want to rebuild my plugin layer just at zoom=10, but not rebuild it at each zoom like 19 18 17 16 15 ... 10. I have a lot of markers and some animations when zoom changing, and now it necessary to forward all this animation at each zoom from 10 to 20. Would be great to have possibility to forward animation just from 10 to 20 zoom directly.

    What other alternatives are available?

    A little workaround is to use ceil() for zoom.

    Can you provide any other information?

    Example of similarfunctional in Google Maps With such functional I can change my widgetState just one time when MapEvent (move or zooming) was ended.

    Platforms Affected

    Android, iOS, Web, Windows, MacOS, Linux

    Severity

    Annoying: Currently have to use workarounds

    Requirements

    • [X] I agree to follow this project's Code of Conduct
    • [X] I am using the latest stable version of this package
    • [X] I have checked for similar feature requests which may be duplicates
    enhancement 
    opened by Pepslee 1
  • Simplify FlutterMapState by:

    Simplify FlutterMapState by:

    1. Explicitly separating core state form derived quantities. This let's us handle state updates and invalidation more consistently.
    2. Preserve the current memoization behavior for derived quantities by introducing an explicit caching abstraction.
    3. Reduce the extend of the render tree being rebuild by avoiding setState, therefore avoid invalidation of the entire stateful widget.

    (Re (1): to be clear I'm not aware of any consistency issues today. I'm only stating that the updates and invalidation are done very selectively in a way that requires intimate knowledge of how derived quantities functionally depend on core state.

    Arguably this is a heavy handed change with some aspects more valuable than others. Take it as an RFC we can work through, break up, remold and even throw away :).

    Ultimately, this was the result of me trying to squeeze out a few ms from my frame times. I was struggling to reason, which quantities are updated where and when? How do state changes relate to render tree rebuilding? I do hope that this refactor makes it a little clearer. The good or bad news: I didn't find any low hanging fruit for improving performance. While this change most certainly has some performance implications, it seemed pretty much unchanged with my local testing. Do you have any benchmarks that you run? Let me know what you think - thanks!

    opened by ignatz 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 Jan 3, 2023
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 177 Jan 2, 2023
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 8 Oct 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 8 Dec 4, 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 49 Nov 17, 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 10 Dec 22, 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 74 Jan 3, 2023
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 7 Dec 8, 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 189 Dec 5, 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 Dec 2, 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 19 Dec 6, 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 4 Dec 22, 2022
A google map example for flutter

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOf

Behruz Hurramov 5 Nov 24, 2022