To reproduce: Run the example app (version 0.0.9 exhibits this problem). Go to the polylines tab, then scroll the map so that the polylines are pushed off-screen. On Android, at least, the polylines paint on top of the surrounding widgets, though not the app-bar. See the attached picture.

Handling offline maps by loading mbtiles extracted files in a directory structure is not desired because of the increment in application size. A feature to load mbtiles directly will be propper handling of offline maps.
Also, current mbtiles no longer contain png images, instead they contain compressed protocol buffer tile information, loading mbtiles with this format would reduce significantly space requirements.

Is there an example on how to implement search feature using this plugin? Thanks!

Hi! Once again, thanks for the great work. Is there a way to use better resolution of tiles, i.e. downloading more tiles and showing them scaled down, more packed. The OpenStreetMaps and even MapBox tiles look too pixelized.

Hello,
I'm new in flutter and i wanted to use flutter_map to display some maps in my new application.
I started with flutter_map 0.0.1 and there were no problems but once I've updated flutter I had an error (#12) that was solved in version 0.0.3 so I changed the version in my pubspec.yaml from

flutter_map: "^0.0.1"

to

flutter_map: "^0.0.3"

But when I try to run

flutter packages get

I get this error:

Running "flutter packages get" in pedibus_app...
Because every version of flutter_test from sdk depends on quiver 0.29.0+1 and flutter_map >=0.0.2
  depends on quiver ^0.28.0, flutter_test from sdk is incompatible with flutter_map >=0.0.2.
So, because pedibus_app depends on both flutter_map ^0.0.3 and flutter_test any from sdk, version
  solving failed.
pub get failed (1)

I have found no solutions...

Here is my pubspec.yaml if you need it:

name: pedibus_app
description: App for the pedibus project.

dependencies:
  http: "^0.11.3+16"
  flutter_map: "^0.0.3"
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - resources/logo.png
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies, 
  # see https://flutter.io/custom-fonts/#from-packages

Thanks in advance.
Carlo

Is there any way I can convince my mapview to cache the images it downloads indefinitely? I'd like to be able to look at an area once and then have the tiles downloaded always available, at least until someone clear's the app's cache.

I'd also be happy with a way to supply my own custom tiles that doesn't involve hosting a webserver. Saw a technique for a React map library that involved giving a local filename to the device's filesystem instead of a URL. I doubt something like that would work as easily here, but how hard would it be for me to add?

Running the simplest flutter app with flutter_map causes this Exception:

type 'Bounds<num>' is not a subtype of type 'Bounds<double>' where
Bounds is from package:flutter_map/src/core/bounds.dart
num is from dart:core
Bounds is from package:flutter_map/src/core/bounds.dart
double is from dart:core

Dependencies:

  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.0
  flutter_map: ^0.0.1

imports and dart code:

import 'package:flutter/material.dart';
import 'package:latlong/latlong.dart';
import 'package:flutter_map/flutter_map.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  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://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
          additionalOptions: {
            'accessToken': 'my api key from mapbox',
            'id': 'mapbox.streets',
          },
        ),
        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(),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

I was trying to add an "onTap" feature on the pins but the original code of the flutter_logo.dart was built around BoxDecoration, thus not allowing interactivity.

I have rewritten it this way, can it be useful? I'm new to contributions, but i would like to help.

Widget build(BuildContext context) {
    final IconThemeData iconTheme = IconTheme.of(context);
    final double iconSize = size ?? iconTheme.size;
    final MaterialColor logoColors = colors ?? Colors.blue;
    return new GestureDetector(
        onTap: (){print("I am a pin");},
        child: new Container(
            width: iconSize,
            height: iconSize,

            decoration:new BoxDecoration(

              image: new DecorationImage(
                image: new ExactAssetImage('assets/pins/pin.png'),
                fit: BoxFit.contain,

              ),
            )
        )
    );
  }```

When attempting to run the example widget from the readme I get the following error:

The following assertion was thrown building Container:
type 'Bounds' is not a subtype of type 'Bounds' where
Bounds is from package:flutter_map/src/core/bounds.dart
num is from dart:core
Bounds is from package:flutter_map/src/core/bounds.dart
double is from dart:core

Any idea what could be causing this? It's hard for me to tell if this is something caused by the latest version of flutter, an error on my part, or an actual bug in the library.

There is the PolylineLayerOptions to draw the many line on the map,
but how to draw a circle on the map?

This feature should be self-fullfilling, but would be good to allow users to add their own TextSpan (text with urls) to the bottom right/left corners.

Is there an option to show the InfoWindow when you tap on the map like in Google Maps?

I'm using markers on my flutter_map, using the built-in Icon class as the child, and they are drawn with the anchor at the top-left corner of the icon. This is different than the FlutterLogo() that is used in the examples that has its anchor at the middle of the logo (and therefore is centered on the location of the marker). I've played with Container alignment, Align class, etc, but cannot seem to change the anchor location of the drawn marker.

Following the leaflet.js implementation, it would be great to be able to change the anchor of the drawn marker. See, e.g., http://leafletjs.com/examples/custom-icons/. for a good example.

Can this currently be done? If so, how, and if not, do you plan to add support for that?

Thanks!

Hi,

Is there a way to know when a user panned the map? My goal is to update the markers shown in the map if the user pans it. A callback that is called with the new coordinates of the center of the maps would be great. Is it possible?

Thanks!

hit exception when i am trying to run the example code with Dart2.0.

flutter --version
Flutter 0.1.8-pre.43 • channel master • https://github.com/flutter/flutter.git
Framework • revision fe334e1652 (2 weeks ago) • 2018-03-02 17:54:51 -0800
Engine • revision 97b22348c8
Tools • Dart 2.0.0-dev.32.0.flutter-ee15c8eb68

I/flutter (12109): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (12109): The following assertion was thrown building Container:
I/flutter (12109): type 'Bounds' is not a subtype of type 'Bounds' where
I/flutter (12109): Bounds is from package:flutter_map/src/core/bounds.dart
I/flutter (12109): num is from dart:core
I/flutter (12109): Bounds is from package:flutter_map/src/core/bounds.dart
I/flutter (12109): double is from dart:core
I/flutter (12109): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (12109): more information in this error message to help you determine and fix the underlying cause.
I/flutter (12109): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (12109): https://github.com/flutter/flutter/issues/new
I/flutter (12109): When the exception was thrown, this was the stack:
I/flutter (12109): #0 new Bounds (package:flutter_map/src/core/bounds.dart:11:20)
I/flutter (12109): #1 SphericalMercator._bounds (package:flutter_map/src/geo/crs/crs.dart:86:39)
I/flutter (12109): #2 SphericalMercator._bounds (package:flutter_map/src/geo/crs/crs.dart:86:25)
I/flutter (12109): #3 SphericalMercator.bounds (package:flutter_map/src/geo/crs/crs.dart:93:32)
I/flutter (12109): #4 Crs.getProjectedBounds (package:flutter_map/src/geo/crs/crs.dart:43:24)
I/flutter (12109): #5 MapState.getPixelWorldBounds (package:flutter_map/src/map/map.dart:116:24)
I/flutter (12109): #6 _TileLayerState._resetGrid (package:flutter_map/src/layer/tile_layer.dart:173:22)
I/flutter (12109): #7 _TileLayerState._setView (package:flutter_map/src/layer/tile_layer.dart:85:7)
I/flutter (12109): #8 _TileLayerState._resetView (package:flutter_map/src/layer/tile_layer.dart:77:10)
I/flutter (12109): #9 _TileLayerState.initState (package:flutter_map/src/layer/tile_layer.dart:62:5)
I/flutter (12109): #10 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3734:14)
I/flutter (12109): #11 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter (12109): #12 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #13 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4716:32)
I/flutter (12109): #14 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #15 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #16 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3636:16)
I/flutter (12109): #17 Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5)
I/flutter (12109): #18 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5)
I/flutter (12109): #19 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter (12109): #20 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #21 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #22 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4611:14)
I/flutter (12109): #23 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #24 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #25 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4611:14)
I/flutter (12109): #26 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #27 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #28 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3636:16)
I/flutter (12109): #29 Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5)
I/flutter (12109): #30 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5)
I/flutter (12109): #31 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3741:11)
I/flutter (12109): #32 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter (12109): #33 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #34 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #35 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3636:16)
I/flutter (12109): #36 Element.rebuild (package:flutter/src/widgets/framework.dart:3478:5)
I/flutter (12109): #37 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3605:5)
I/flutter (12109): #38 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3600:5)
I/flutter (12109): #39 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2890:14)
I/flutter (12109): #40 Element.updateChild (package:flutter/src/widgets/framework.dart:2693:12)
I/flutter (12109): #41 _LayoutBuilderElement._layout. (package:flutter/src/widgets/layout_builder.dart:118:18)
I/flutter (12109): #42 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2205:19)
I/flutter (12109): #43 _LayoutBuilderElement._layout (package:flutter/src/widgets/layout_builder.dart:107:11)
I/flutter (12109): #44 RenderObject.invokeLayoutCallback. (package:flutter/src/rendering/object.dart:1666:58)
I/flutter (12109): #45 PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:740:15)
I/flutter (12109): #46 RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1666:13)
I/flutter (12109): #47 _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:205:5)
I/flutter (12109): #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #49 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:798:17)
I/flutter (12109): #50 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #51 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11)
I/flutter (12109): #52 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #53 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:124:11)
I/flutter (12109): #54 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:256:7)
I/flutter (12109): #55 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:194:7)
I/flutter (12109): #56 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:338:14)
I/flutter (12109): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #58 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #60 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #61 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1141:11)
I/flutter (12109): #62 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #63 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #64 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #65 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #66 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #67 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #68 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #69 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #70 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #71 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #72 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2713:13)
I/flutter (12109): #73 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #74 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #75 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #76 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:509:15)
I/flutter (12109): #77 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #78 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #79 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #80 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #81 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #82 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #83 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #84 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #85 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #86 __RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin^^#U0^#U0.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
I/flutter (12109): #87 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (12109): #88 RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13)
I/flutter (12109): #89 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7)
I/flutter (12109): #90 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18)
I/flutter (12109): #91 _____BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19)
I/flutter (12109): #92 ______BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:622:13)
I/flutter (12109): #93 _____BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
I/flutter (12109): #94 ___BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (12109): #95 ___BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (12109): #96 ___BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:751:7)
I/flutter (12109): #98 _Timer._runTimers (dart:isolate/timer_impl.dart:382:19)
I/flutter (12109): #99 _Timer._handleMessage (dart:isolate/timer_impl.dart:416:5)
I/flutter (12109): #100 _RawReceivePortImpl._handleMessage (dart:isolate/isolate_patch.dart:165:12)
I/flutter (12109): (elided one frame from package dart:async)
I/flutter (12109):

zooming out to a zoom level that displays about 1/2 of the US seems to prune too many tiles

steps to reproduce:

1. run example
2. rotate map, observe marker locations
3. pan the map
4. observe marker location jumps to the correct location

Hi all, I've been looking at this issue for two hours and cannot find an answer. Any help will be appreciated.

This is the widget I have:

class _PropertiesMap extends StatelessWidget {
  final double width;
  final double mapZoom;
  final LatLng mapCenter;
  final Function(LatLng, double) onViewChanged;
  final Function(PropertyListItem) onPropertySelected;

  _PropertiesMap(
      {@required this.width,
      @required this.mapCenter,
      @required this.mapZoom,
      @required this.onViewChanged});

  @override
  Widget build(BuildContext context) {
    print('mapCenterOnBuild:${this.mapCenter}'); //FIRST PRINT
    final mapOptions = MapOptions(
        zoom: this.mapZoom,
        onPositionChanged: (position) {
          if (position.center != null && position.zoom != null)
            onViewChanged(position.center, position.zoom);
          print('mapCenterOnEvent:${this.mapCenter}');//SECOND PRINT
        },
        center: this.mapCenter);
    return Stack(fit: StackFit.expand, children: <Widget>[
      FlutterMap(
        options: mapOptions,
        layers: [
          TileLayerOptions(
              urlTemplate:
                  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
              additionalOptions: {
                'accessToken':'<Token>',
                'id': 'mapbox.streets'
              }),
        ],
      ),
    ]);
  }

When I run this this is the log i'm getting:

flutter: mapCenterOnBuild:LatLng(latitude:50.809377804666546, longitude:4.385948815972581)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80901622467792, longitude:4.386177696935404),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.808582326321385, longitude:4.38646380010344),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.808582326321385, longitude:4.38646380010344)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80832921763732, longitude:4.386692681066263),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80832921763732, longitude:4.386692681066263)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80800378946193, longitude:4.387036003820169),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80800378946193, longitude:4.387036003820169)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80793147123002, longitude:4.387093226025383),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80793147123002, longitude:4.387093226025383)

My question is how can I get a different location from the First print and the second?
I'm getting for example LatLng(latitude:50.80832921763732, longitude:4.386692681066263) on the build and always the same from the onEvent LatLng(latitude:50.8267303, longitude:4.3738753).
It looks like the Event is raised on the initial instance on the map? Is this possible? but then what happens to the following renredered maps?

Thanks for any help you could give me.

Alex.

Hi, I'm trying to use the move of the MapController but it does not move the map. I can see the value of the map center is moved but not the tile in the background. If I move the map slightly then it jumps to the new map center. Any idea? thanks.

To improve readability and extensibility, having some comments in the code would be helpful. Dart and Flutter are new technologies and including comments in the code is helpful to the community. Thanks

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?

flutter/flutter#10048

"layers" should be set on the FlutterMap constructor instead

When displaying a map, I'm getting tons of errors in the output saying that the buffer was empty. The app runs fine though.
My code:

class _MyMapTestState extends State<MyMapTest> {
  @override
  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://api.tiles.mapbox.com/v4/"
              "{id}/{z}/{x}/{y}@2x.png?access_token=$token",
          additionalOptions: {
            'accessToken': '<$token>',
            'id': 'mapbox.streets',
          },
        ),
        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(),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Output:

E/flutter (  873): [ERROR:flutter/lib/ui/painting/codec.cc(76)] InitCodec failed - buffer was empty
I/chatty  (  873): uid=10094(u0_a94) io_thread identical 6 lines
E/flutter (  873): [ERROR:flutter/lib/ui/painting/codec.cc(76)] InitCodec failed - buffer was empty
I/flutter (  873): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter (  873): The following _Exception was thrown resolving an image codec:
I/flutter (  873): Exception: operation failed
I/flutter (  873): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (  873): Another exception was thrown: Exception: operation failed
I/chatty  (  873): uid=10094(u0_a94) Thread-6 identical 5 lines
I/flutter (  873): Another exception was thrown: Exception: operation failed
E/flutter (  873): [ERROR:flutter/lib/ui/painting/codec.cc(76)] InitCodec failed - buffer was empty
E/flutter (  873): [ERROR:flutter/lib/ui/painting/codec.cc(76)] InitCodec failed - buffer was empty
I/flutter (  873): Another exception was thrown: Exception: operation failed
I/flutter (  873): Another exception was thrown: Exception: operation failed

Flutter info

Flutter (Channel beta, v0.2.3, on Microsoft Windows [Version 10.0.16299.309], locale en-US)

I am not using the Dart 2.0 preview.

Hello,

Thanks for your work on this plugin.

Maybe I'm missing something, but I cant seem to stop pinch-zoom when setting min/max constraints. The only thing that appears to abide is the default zoom variable.

          FlutterMap(
                options: new MapOptions(
                  center: new LatLng(51.457282, -2.586597),
                  maxZoom: 15.0, 
                  minZoom: 15.0,
                  zoom: 15.0,
                ),
                layers: [
                  new TileLayerOptions(
                    maxZoom: 15.0,
                      urlTemplate:
                      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                      subdomains: ['a'])
                ]
          )

I'll see about digging around in the code for a fix, but I am new to contributing to any open-source project.

When you zoom in/out of the map, it can cause the entire map to disappear for a bit, especially on slow internet connection.

It would be great if the map tiles that have already been retrieved for the area you are zooming in get resized while the app is waiting for the download of the proper res tiles to complete.

As in, when you zoom it, it will zoom the tiles in as "placeholder" from the closest scale found in the cache.

Thanks for the amazing work =)

I imagine many Flutter apps will want to use Leaflet with custom maps (e.g. indoor map of a mall, map of a campus, map of a recreational park).

These could benefit from being stored on device (as assets of the app). You'd get immediate load times and offline capability.

AFAIK, Leaflet currently only supports providing tiles through a web URL scheme (https://example.com/path/{id}/{z}/{x}/{y}.png) and I assume the JS version of leaflet doesn't really have a need for anything else. But I could be wrong.

In any case, I think this could be a really neat feature for a mobile app mapping solution.

cc @wmleler

The map doesn't load when an internet connection is setup at runtime. It only starts loading after you start zooming in or out.

Steps to reproduce:

1. Start the application without internet.
2. Enable wifi or mobile internet.
3. Observe
4. Zoom in or out.

• MapController https://github.com/apptreesoftware/flutter_map/issues/58
• Plugin API
• Code comments
• feature roadmap
• Layer types (MBTiles, etc)

Hey,

Would be great to see a fixed scale for markers, to cover a consistent area between zooms.

I did try to implement a solution in the marker_layer.dart, togglable by a new variable fixedScale, but unable to adjust size bigger than 100x100.

Ideas:
map.getZoomScale(map.zoom, map.zoom) always returns 1.0 given the duplicated arguments, so currently its not doing anything in current code. I think it was placed here for this particular feature in the future. I believe the starting zoom should populate the second argument to maintain the starting size of the widget(image).

Current Implementation:
My current implementation looks something like this (considering my starting zoom is 17.0).
Screen capture on youtube
Trouble I found is that the marker Width and Height have to be within 0-100 to work. My marker's widget is a AssetImage in a container.

Widget build(BuildContext context) {
[...]
          var width = markerOpt.width;
          var height = markerOpt.height;

          var pixelPosX =
              (pos.x - (markerOpt.width - markerOpt._anchor.left)).toDouble();
          var pixelPosY =
              (pos.y - (markerOpt.height - markerOpt._anchor.top)).toDouble();

          if (markerOpt.fixScale) {
            width = markerOpt.width * map.getZoomScale(map.zoom, 17.0);
            height = markerOpt.height * map.getZoomScale(map.zoom, 17.0);

            pixelPosX = (pos.x -
                    (width -
                        (markerOpt._anchor.left *
                            map.getZoomScale(map.zoom, 17.0))))
                .toDouble();
            pixelPosY = (pos.y -
                    (height -
                        (markerOpt._anchor.top *
                            map.getZoomScale(map.zoom, 17.0))))
                .toDouble();
          }

          if (!latlngBounds.contains(markerOpt.point)) {
            continue;
          }

          markers.add(
            new Positioned(
              width: width,
              height: height,
              left: pixelPosX,
              top: pixelPosY,
              child: markerOpt.builder(context),
            ),
          );
        }
[...]

Got any ideas on how to increase the size?

Is it possible to implement polygons drawing feature?

Was following the instructions, but 'https://api.tiles.mapbox/v4...' didn't work. I had to remove the 'tiles' portion... so it was: "https://api.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}"

Is there a way to use a more appropriate background color or placeholder tile for the map when tiles are loading?

How to add a hybrid map ?

Is there an easy way to make markers draggable around the map? I tried with a GestureDetector and using onPanDown, but the problem is once the marker is released you get screen coordinates and not GPS coordinates.

I want make flutter_map static, disable user input for it. I supposed setting interactive option to false would do this, but it doesn't change anything. How can it be solved?

Hi there,

first of all, thank you for such a great widget that enabled our transition to Flutter. I have a question/feature request: I've integrated user's position into the map as a marker (which seems to work fine). However, I'd like to have have a button for moving the map's center to the the current user's location. But simply setting map's center won't work. So I'm interested in any suggestions about the options I have (might include modifying flutter_map code).

Thank you for your support,
Ziga Patacko Koderman

Hello author flutter map
I thanks you create widget map is very good,
But raster tiles is blurred on mobile , you can update read verter tile same leaftlet.

Is there a way to add new Markers and remove markers from the Map when using the widget hierarchy?
I tried adding a MarkerLayerOptions to the map.layers variable, but I was unable to find a way to make the map update graphically.

If someone could tell me when/if this is implemented, I would be grateful!

(not sure if this is an issue)

Various names have been suggested. Some of the finalists are:

• open_map
• leaflet_map

Feedback is welcome!

I am trying to move the center of a map whenever I retrieve the user's location.
I have the following code to do that:

void initState() {
  super.initState();
  mapController = new MapController();
  try {
    new Location().getLocation.then((Map<String, double> loc) {
      print(loc);
      print("Map ready: " + mapController.ready.toString());
      setState(
          () => location = new LatLng(loc["latitude"], loc["longitude"]));
      mapController.move(location, zoom); // Location and zoom are not null
    })/*.catchError((e) => print(e))*/;
  } catch (e) {
    print(e);
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return new Center(
            child: new Text("We couldn't get your location!"),
          );
        });
  }
}

Doing this, I'm getting the following error:

I/flutter (21207): {altitude: 3.40031719, latitude: 33.985311, accuracy: 11.723999977111816, speed_accuracy: 0.0, speed: 0.0, longitude: -118.2043953}
E/flutter (21207): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
E/flutter (21207): NoSuchMethodError: The method '/' was called on null.
E/flutter (21207): Receiver: null
E/flutter (21207): Tried calling: /(2.0)
E/flutter (21207): #0      Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:46:5)
E/flutter (21207): #1      MapState.getNewPixelOrigin (package:flutter_map/src/map/map.dart:187:30)
E/flutter (21207): #2      MapState.move (package:flutter_map/src/map/map.dart:85:20)
E/flutter (21207): #3      MapControllerImpl.move (package:flutter_map/src/map/map.dart:23:12)
E/flutter (21207): #4      MapViewState.initState.<anonymous closure> (file:///C:/Users/bramv/Documents/Yes%20Theory/map_test/lib/main.dart:390:23)
E/flutter (21207): #5      _RootZone.runUnary (dart:async/zone.dart:1381:54)
E/flutter (21207): #6      _FutureListener.handleValue (dart:async/future_impl.dart:129:18)
E/flutter (21207): #7      Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:638:45)
E/flutter (21207): #8      Future._propagateToListeners (dart:async/future_impl.dart:667:32)
E/flutter (21207): #9      Future._complete (dart:async/future_impl.dart:472:7)
E/flutter (21207): #10     _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
E/flutter (21207): #11     _AsyncAwaitCompleter.complete (dart:async/runtime/libasync_patch.dart:28:18)
E/flutter (21207): #12     MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart)
E/flutter (21207): <asynchronous suspension>
E/flutter (21207): #13     Location.getLocation (package:location/location.dart:12:8)
E/flutter (21207): #14     MapViewState.initState (file:///C:/Users/bramv/Documents/Yes%20Theory/map_test/lib/main.dart:386:22)
E/flutter (21207): #15     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3764:58)
E/flutter (21207): #16     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3630:5)
E/flutter (21207): #17     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #18     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4772:32)
E/flutter (21207): #19     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #20     Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
E/flutter (21207): #21     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3666:16)
E/flutter (21207): #22     Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
E/flutter (21207): #23     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3635:5)
E/flutter (21207): #24     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3630:5)
E/flutter (21207): #25     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #26     Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
E/flutter (21207): #27     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4667:14)
E/flutter (21207): #28     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #29     Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
E/flutter (21207): #30     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3666:16)
E/flutter (21207): #31     Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
E/flutter (21207): #32     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3635:5)
E/flutter (21207): #33     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3630:5)
E/flutter (21207): #34     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #35     Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
E/flutter (21207): #36     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3666:16)
E/flutter (21207): #37     Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
E/flutter (21207): #38     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3635:5)
E/flutter (21207): #39     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3630:5)
E/flutter (21207): #40     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2920:14)
E/flutter (21207): #41     Element.updateChild (package:flutter/src/widgets/framework.dart:2723:12)
E/flutter (21207): #42     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3666:16)
E/flutter (21207): #43     Element.rebuild (package:flutter/src/widgets/framework.dart:3508:5)
E/flutter (21207): #44     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3635:5)
E/flutter (21207): #45     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3630:5)
E/flutter (21207): #46     ParentDataElement.mount

I also checked whether the map controller is ready and it is.
I used the following code to create the map:

new FlutterMap(
            mapController: mapController,
            options: new MapOptions(
              center: fallbackLocation,
              zoom: zoom,
            ),
            layers: [
              new TileLayerOptions(
                urlTemplate: "https://api.tiles.mapbox.com/v4/"
                    "{id}/{z}/{x}/{y}@2x.png?access_token=...",
                additionalOptions: {
                  'accessToken':
                      '<...>',
                  'id': 'mapbox.streets',
                },
              ),
              new MarkerLayerOptions(
                  markers: location == null
                      ? []
                      : [
                          new Marker(
                            width: 40.0,
                            height: 40.0,
                            point: location,
                            builder: (ctx) => new Container(
                                  child: new Icon(
                                    Icons.add_location,
                                    color: Colors.redAccent,
                                    size: 40.0,
                                  ),
                                ),
                          )
                        ]),
            ]),

Any reason why this would fail?

I use the plugin,the map load very slow,and most important is that some block of the map never load at all,how to solve this.

What would be a good way to add moving markers? I'd like to update them based on an mqtt stream...

Firstly thank you, really enjoying the map!

The Anchor.top and Anchor.bottom look like they are the wrong way around, Anchor top actually pins the bottom of my marker to the correct spot.

Should be easy to verify, just place a few markers and zoom in and out.

When zooming out very far and moving the map around, you are greeted with the following error.

https://pastebin.com/VxQ5jKhX

Setting the pan boundary to -90, -180 and 90, 180 did not resolve the issue.

Steps to reproduce:

1. Run example
2. Let default map view tiles load
3. Pinch to zoom into the map at a new zoom level
4. Observe the previously loaded tiles disappear
5. Wait for new tiles to load
6. Observe new tiles fade in

This experience is jarring and can prevent me from seeing what I'm zooming into.

This issue can also be reproduced by zooming out from the initial map location to other zoom levels.

Instead the tiles should render as they do in Mapbox's Raster tile source example. The old tiles remain rendered and are scaled to the current zoom level. New tiles at different zoom levels then fade in on top of the old tiles.

Is there a way to change marker position? We would like to show user's current position and update it regularly. I noticed current location is on the roadmap, I just wonder if there is some workaround. My another idea was to make the location dot a separate widget on top of the map and update its location with MapController. Any ideas?

This is a feature request. It'd be nice to have a .moveAnimated(center, zoom, ??).

Here's my terrible janky animation method at this time:

Future animateMapMove(MapController mapController, int msDelay, LatLng center) {
  mapController.move(center, 12.0);
  return new Future.delayed(Duration(milliseconds: msDelay), () => "1");
}

animateMapMove(store.state.mapController, 100, LatLng(startingPoint.latitude + 1* incLat, startingPoint.longitude + 1* incLon))
      .then( (t) => animateMapMove(store.state.mapController, 80, LatLng(startingPoint.latitude + 2* incLat, startingPoint.longitude + 2* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 30, LatLng(startingPoint.latitude + 3* incLat, startingPoint.longitude + 3* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 10, LatLng(startingPoint.latitude + 4* incLat, startingPoint.longitude + 4* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 10, LatLng(startingPoint.latitude + 5* incLat, startingPoint.longitude + 5* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 30, LatLng(startingPoint.latitude + 6* incLat, startingPoint.longitude + 6* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 80, LatLng(startingPoint.latitude + 7* incLat, startingPoint.longitude + 7* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 100, LatLng(startingPoint.latitude + 8* incLat, startingPoint.longitude + 8* incLon)))
      .then( (t) => animateMapMove(store.state.mapController, 100, action.mapCenter))
  ;

I'd like to be able to use Flutter's animation features, but I can't seem to figure out how to get a reference to vsync. I'm new to Flutter. I guess just about everyone is.

Here's some code that I was trying to use, but never got to go:

    final _latTween = new Tween<double>(begin: store.state.mapCenter.latitude, end: action.mapCenter.latitude);
    final _lngTween = new Tween<double>(begin: store.state.mapCenter.longitude, end: action.mapCenter.longitude);

    AnimationController controller;
    Animation<double> animation;

    // I can't figure out how to get a vsync in here. Might work if I could.
    controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync:);
    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn);

    controller.addListener(() {
      store.state.mapController.move(LatLng(_latTween.evaluate(animation), _lngTween.evaluate(animation)), 12.0);
    });

    controller.forward();

I'm not sure if we'd pass an AnimationController to the MapController, or vice-versa, or what.

It would be nice to be able to double-tap on the map to zoom in on that spot. How hard would this be to implement? Maybe add it as a default feature?