Custom Code Showcase
AR
Ariel Romero

Open Street Map + Clusters + PopOvers with data

For those like me that want to use Open Street Map as an alternative to Google Maps, here comes flutter_map and  flutter_map_marker_cluster, to help us. This widget let you use OSM and also create clusters with some custom options.[Gif3.gif] My code still requires some enhancements  so you can pass a json as parameter and work over it inside the custom widget (working on it), but it's a good start and of course i'm open if someone in this community wants to improve it🙂

So let's head over to the important, the code, here: Dependencies (imports in the code): • flutter_map_marker_cluster: ^0.4.4 • latlong2: ^0.8.1 Note: It does not require to declare a dependency for flutter_map since it is already incorporated in FF, but you still have to import it (thanks for this knowledge to this guy in the FF Discord @BulletBitter 🙌) Note 2: if you include it in any widget, it's going to cause an "error running 'flutter pub get'" 

 import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' as mylatlong;

class Fmap4 extends StatefulWidget {
  const Fmap4({
    Key key,
    this.width,
    this.height,
  }) : super(key: key);

  final double width;
  final double height;

  @override
  _Fmap4State createState() => _Fmap4State();
}

class _Fmap4State extends State {
  final PopupController _popupController = PopupController();

  List

Off course there is more to customize but it requires to read the documentation: • PubDev Package • Repo for Examples (GitHub) • Library for Classes and Options (in terms of customization)   Hope this could be useful for you guys!. Ariel-.

2
5 replies