mapping_library 0.0.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 48

Basic Mapping engine for Flutter #

This library supplies a basic implementation of a tiled mapping engine for flutter. There is a basic openstreetmap widget available which can be set on a specific geographic location. Basic gestures are implemented to pan and zoom this map. More advanced options are available for adding markers and vector based object like lines, polylines, circles and polygons. Also a basic Marker implementation is available.

This library actually consists of two project, mapping_library and mapping_library_extentions. For use on a IOS or Android device these both needs to be added to the dependencies. The mapping_library_extentions library adds extra IOS and Android specific code. When using Flutter-web only add the mapping_library to the dependencies (not tested yet!).

  • Version: 0.0.6

Disclaimer: This version is far from finished. Most of the options just supply very basic functionality which might still holds many bugs. We are continuesly adding and improving options. Use at your own risk

Installation #

     mapping_library: any
     mapping_library_extentions: any

Examples #

Checkout the github repository for a full example off all the options and how to use them!!!

Basic Example

Create an instance of the OsmMap object in the contructor of your App widget as the map needs to be in persistent memory. Add this instance to the Build function.. Do not add it directly to the build method!!

    import 'package:mapping_library/mapping_library.dart';
    class MyApp extends StatelessWidget {
      MyApp() : super() {
        // It is important that the widget is pre-created in the constructor
        // of this parent widget as it needs to be persistant in memory
        // So do not add the directly to the build method. 
        _osmMap = _createOsmMapWidget();
        OsmMap _osmMap;
        Widget _createOsmMapWidget() {
            return OsmMap(
                mapPosition: new MapPosition.Create(
                  geoPoint: new GeoPoint(52.45657243868931, 5.52041338863477),
                  zoomLevel: 11,
        Widget build(BuildContext context) {  
            return MaterialApp(  
                title: 'Flutter Demo',  
                theme: ThemeData(  
                home: Container(   
                    child: _osmMap,

There are three callback methods:

  • mapReady (Fired when the map initially is created, needed when you want to add more layers)
  • mapPositionChanged (Fired as soon as the position or zoom of the map is changed)
    Return: Viewport object, this holds both the current MapPosition as the visual BoundingBox of the current map
  • mapTabbed (Fired when you tab on the map)
    Return: GeoPoint object, this holds the geographic location of the position tabbed.

Advanced examples

If you want to do more advanced stuff you need to create all the objects in the contructor of the Widget like this:

Define a MapView variable, Create this new object in the apps constructor and add the mapReady event handler.

class MyApp extends StatelessWidget {
  MyApp() : super() {
    _mapView = new mapview.MapView(_mapReady);

  // Define a Mapview
  mapview.MapView _mapView;

  _mapReady(mapview.MapView mapView) {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: Container(
        child: _mapView

Continue by adding code to the mapReady callback function. First create a base Layer. This normally should be a TileLayer. Define a http source where the tiles are served from, Create a new HttpTileSource and finally create a new TileLayer using this source.

_mapReady(mapview.MapView mapView) {
    final _url = "";
    HttpTileSource osmTileSource = new HttpTileSource(_url); TileLayer
    tileLayer = new TileLayer(osmTileSource); _mapView.AddLayer(tileLayer);

Create a new MapPosition to initially more and zoom the map to a chosen default location. Create a new GeoPoint with the chosen geographic location and use this with the desired zoomlevel to create a new MapPosition. Set the mapview to this new MapPosition.

GeoPoint s = new GeoPoint(52.45657243868931, 5.52041338863477);
MapPosition _initialPosition = MapPosition.fromGeopointScale(s, 11);

[0.0.6] 25 Oktober 2019 #

  • Broken release Fix

[0.0.5] 25 Oktober 2019 #

  • Added fixed objects layer
  • Added a basic scalebar as Fixed object
  • Some bugfixes and example changes

[0.0.4] 22 Oktober 2019 #

  • Some bugfixes
  • Code formatting
  • path naming changes in the lib
  • Comment and documentation additions and changes

[0.0.3] 21 Oktober 2019 #

  • Lots of changes and fixes
  • Added support library (extentions) for specific device support
  • Added Polyline
  • Updated example application

[0.0.2] 3 Oktober 2019 #

  • Format changes
  • Added sample
  • Started on API Documentation

[0.0.1] 2 Oktober 2019 #

  • TODO: Describe initial release.


import 'package:example/test_fixedobjects.dart';
import 'package:example/test_markers.dart';
import 'package:example/test_mbtiles.dart';
import 'package:example/test_overlay.dart';
import 'package:example/test_vectors.dart';
import 'package:flutter/material.dart';
import 'package:mapping_library_extentions/extentions.dart';
import 'package:mapping_library/mapping_library.dart';
import 'package:permission_handler/permission_handler.dart';
import 'dart:developer';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: MappingHomePage(title: 'Mapping Library Test App'),

class MappingHomePage extends StatefulWidget {
  MappingHomePage({Key key, this.title}) : super(key: key);
  final String title;

  _MappingPageState createState() => _MappingPageState();

/// This is an example of how to use the mapping_library
/// The mapping tiles used in this example are from
/// the website
/// This example will show tiles from the openflightmaps site
/// To run this example copy the files which are in the example/files
/// directory to your device in the /sdcard/Download directory
class _MappingPageState extends State<MappingHomePage> {
  _MappingPageState() {
    _openFlightMap = _createOfmMapWidget();
  // This is the base Widget which will show just the map tiles
  // from openflightmaps
  OpenFlightMap _openFlightMap;
  // Some operations needs permission from the user to run
  PermissionStatus _storagePermStatus;

  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // !!!!!!!!!!!!!!!!!! Important !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // The widget needs to be pre-created in the constructor of the parent
  // widget. It will not work correctly if you create the widget in the
  // build function
  // _createOfmMapWidget needs to be called from the parents oonstructor
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  Widget _createOfmMapWidget() {
    return OpenFlightMap(
      mapPosition: new MapPosition.create(
        // This is a location in the middle of the netherlands
        geoPoint: new GeoPoint(52.45657243868931, 5.52041338863477),
        zoomLevel: 10,
      mapReady: _mapReady,

  // mapReady Callback
  // This callback is mandatory. Anything that you want to add to the map in
  // terms of layers, markers etc. can only be added after this callback
  void _mapReady(MapView mapView) {
    // We so a check to see, or ask for storage access permissions ( probably
    // only applicable for andriod devices)
      // permission.value=2 : granted
      if (permission.value == 2) {
        // Permission for storage access is granded so display both the overlay
        // and mbtiles file.
        // Check the test_overlay.dart for the implementation
        // This function will add a additional layer. The first layer is already
        // added when the Widget was created. This will be the base layer. All
        // newly added layers are drawn on top of the base tile layer in order
        // in which the layers are added.

      // A vector layer is used to add "vector" type objects like lines, circles
      // polylines or (closed) polygons. You may use more than one vector layer
      // to have more control over the order the objects are drawn
      VectorLayer vectorLayer = VectorLayer();
      // Polygons and Lines currently support the selected event
      vectorLayer.vectorSelected = _vectorSelected;

      // A marker layer is used to add "Markers" to the map
      MarkersLayer markersLayer = MarkersLayer();
      markersLayer.markerSelected = _markerSelected;

      // Checkout the following methods for there implementation
      testPolyLineUpdate(vectorLayer);  // see test_vectors.dart
      drawHoogeveenCircuit(vectorLayer);  // see test_vectors.dart
      drawLelystadCircuit(vectorLayer); // see test_vetors.dart
      drawSchipholCtr(vectorLayer); // see test_vectors.dart

      // Checkout the following methods for adding Markers to the map
      addDefaultMarker(markersLayer); // see test_markers.dart
      addSimpleMarker(markersLayer); // see test_markers.dart


    // This method will add a "mbtiles" rastermap file to the map
    // see test_mbtiles.dart

  void _vectorSelected(GeomBase vector, GeoPoint clickedPosition) {
    log("Vector selected: " +;

  void _markerSelected(MarkerBase marker) {
    log("Marker selected: " +;

  Future<PermissionStatus> _checkStorageAccess() async {
    _storagePermStatus = await _checkStoragePermissionStatus();
    if (_storagePermStatus.value == 2) return _storagePermStatus;

    await PermissionHandler().requestPermissions([]);
    _storagePermStatus = await _checkStoragePermissionStatus();
    return _storagePermStatus;

  Future<PermissionStatus> _checkStoragePermissionStatus() async {
    return await PermissionHandler().checkPermissionStatus(;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      body: Center(
        child: Container(
          // Give the container a size to fill its parent. The mapview will
          // always (current implementation) full extent to its parent
          height: double.infinity,
          width: double.infinity,
          child: _openFlightMap,
          color: Colors.greenAccent,

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  mapping_library: ^0.0.6

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:mapping_library/mapping_library.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/src/core/values.dart. (-4.41 points)

Analysis of lib/src/core/values.dart reported 9 hints, including:

line 4 col 14: Name non-constant identifiers using lowerCamelCase.

line 8 col 14: Name non-constant identifiers using lowerCamelCase.

line 12 col 14: Name non-constant identifiers using lowerCamelCase.

line 16 col 14: Name non-constant identifiers using lowerCamelCase.

line 20 col 14: Name non-constant identifiers using lowerCamelCase.

Fix lib/src/utils/geopoint.dart. (-1.49 points)

Analysis of lib/src/utils/geopoint.dart reported 3 hints:

line 17 col 16: Name non-constant identifiers using lowerCamelCase.

line 18 col 16: Name non-constant identifiers using lowerCamelCase.

line 19 col 16: Name non-constant identifiers using lowerCamelCase.

Fix lib/src/layers/markers/markerbase.dart. (-1 points)

Analysis of lib/src/layers/markers/markerbase.dart reported 2 hints:

line 113 col 8: The declaration '_getBoundingBox' isn't referenced.

line 120 col 8: The declaration '_calcBoundingBoxByMapsize' isn't referenced.

Fix additional 13 files with analysis or formatting issues. (-4.50 points)

Additional issues in the following files:

  • lib/src/core/mapview.dart (1 hint)
  • lib/src/core/mapviewport.dart (1 hint)
  • lib/src/layers/layers.dart (1 hint)
  • lib/src/layers/markers/renderers/markerrenderer.dart (1 hint)
  • lib/src/layers/markers/simplemarker.dart (1 hint)
  • lib/src/layers/overlay/overlayimages.dart (1 hint)
  • lib/src/layers/vector/vectors.dart (1 hint)
  • lib/src/tiles/tilesource.dart (1 hint)
  • lib/src/utils/boundingbox.dart (1 hint)
  • lib/mapping_library.dart (Run flutter format to format lib/mapping_library.dart.)
  • lib/src/layers/fixedobject/fixedobject.dart (Run flutter format to format lib/src/layers/fixedobject/fixedobject.dart.)
  • lib/src/layers/fixedobjectslayer.dart (Run flutter format to format lib/src/layers/fixedobjectslayer.dart.)
  • lib/src/layers/vector/polyline.dart (Run flutter format to format lib/src/layers/vector/polyline.dart.)

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Homepage URL is insecure. (-5 points)

Update the homepage field and use a secure (https) URL.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
http ^0.12.0+2 0.12.0+4
vector_math ^2.0.8 2.0.8
Transitive dependencies
async 2.4.1
charcode 1.1.3
collection 1.14.11 1.14.12
http_parser 3.1.4
meta 1.1.8
path 1.6.4
pedantic 1.9.0
sky_engine 0.0.99
source_span 1.7.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
Dev dependencies