Flutter 'LatLng' isn't defined

Question

I am making my first baby steps with Leaflet in Flutter, so patience and URLs of tutorials, etc, are welcome.

Every piece of sample code that I can find gives me this error:

The method 'LatLng' isn't defined for the type '_MyHomePageState'. Try correcting the name to the name of an existing method, or defining a method named 'LatLng'.

See for instance the answer to How to setCenter() leaflet map in flutter,which has some very straightforward code.

This part of the code

  new FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        minZoom: _minzoom,
        maxZoom: _maxzoom,
        center: LatLng(mylatitude,mylongitude),    <=== error here
      ),   

gives me the error.

I have had the same error with several code samples, copied from the internet. Could it be because I am using the latest version of the package, and those are old posts?

I am using

dependencies:
  flutter_map: ^0.9.0

As per the install docs, but perhaps all the demos I found used something earlier?

I have the same problem with the code from https://github.com/johnpryan/flutter_map.

It must be something very basic, but, as I said, I am just starting out. Despite familiarity with Leaflet in AngularJs, I am stumped.

What's my problem, and where can I find a good, in-depth, full-featured, tutorial?

[Update] I have completely uninstalled Visual Studio Code (using Revo Uninstaller Pro, which thoroughly scours the registry & file system for left overs. After reinstalling VSC and adding only the Flutter plugin, I still get the problem.

I also installed Android Studio and only the Flutter plugin, with the same result :-(

Solution 1

Import Latlong like below:

import "package:latlong/latlong.dart" as latLng;

Now you can call Latlong with latLng alias

new FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        minZoom: _minzoom,
        maxZoom: _maxzoom,
        center: latLng.LatLng(mylatitude,mylongitude),   
      ),   

I have similar project which implements MapBox map which is similar to Leaflet map, do check out, here is the link:

https://github.com/TheKetan2/covid19_flutter_app

Solution 2

For flutter_map 0.13.1 and above, this line should work

import 'package:latlong2/latlong.dart' as latLng;

You can then call LatLng using the alias,

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

);

Comments

[Mawg says reinstate Monica]

Wow!! Thanks ever so much!! I can't understand why this code was working for others. Btw, I just used import "package:latlong/latlong.dart";, because the as clause gave an error. I suggest it would have required me to use new latLng.LatLng(90,0, 90.0). I will study your Covid 19 app. Why MapBox, when Leaflet/OSM is free?

[Ketan Ramteke]

Welcome. MapBox is also free, and it looked better than Leaflet. Initially I was using Leaflet.

[Mawg says reinstate Monica]

It looks to be free - up to a point; am I missing something?

[Ketan Ramteke]

MapBox does have premium plans too but 25k request were more than enough for my use case so I chose it. You can use Leaflet if it suits your needs :)

[Mawg says reinstate Monica]

I will check out MapBox, since you recommend it; maybe look for some comparisons Thanks again.

[Mawg says reinstate Monica]

Btw, my Leaflet map doesn't have zoom controls. I found a demo with a marker, but can't see how to handle clicking on it. Etc. Do you know if there is any documentation for the flutter map package?

[Reitenator]

It is also possible to skip the as latLng, then it will only be: center: LatLng(51.5,-0.09)

[Elidor00]

It works perfectly also in version 0.14.0 ! Thank you!