mapbox_gl 0.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 90

Flutter Mapbox GL Native

Please note that this project is experimental and is not officially supported. We welcome feedback and contributions.

This Flutter plugin for mapbox-gl-native enables embedded interactive and customizable vector maps inside of a Flutter widget. This project plugin is in early development stage. Only Android is supported for now.

screenshot.png

Getting Started

Android

This demo app uses Mapbox vector tiles, which require a Mapbox account and a Mapbox access token. Obtain a free access token on your Mapbox account page.

  • Install Flutter and validate its installation with flutter doctor
  • Clone this repository with git clone git@github.com:mapbox/flutter-mapbox-gl.git
  • Create a local.properties file with the following path: flutter_mapbox/example/android/local.properties
  • Add mapbox.accessToken="YOUR MAPBOX ACCESS TOKEN" token to the local.properties file.
  • Run the app with cd flutter_mapbox/example && flutter run

Documentation

This README file currently houses all of the documentation for this Flutter project. Please visit mapbox.com/android-docs if you'd like more information about the Mapbox Maps SDK for Android and mapbox.com/ios-sdk for more information about the Mapbox Maps SDK for iOS.

Getting Help

  • Need help with your code?: Look for previous questions on the #mapbox tag — or ask a new question.
  • Have a bug to report? Open an issue. If possible, include a full log and information which shows the issue.
  • Have a feature request? Open an issue. Tell us what the feature should do and why you want the feature.

Sample code

This repository's example library is currently the best place for you to find reference code for this project.

Contributing

We welcome contributions to this repository!

If you're interested in helping build this Mapbox/Flutter integration, please read the contribution guide to learn how to get started.

Changelog for the Flutter Mapbox GL

Mapbox welcomes participation and contributions from everyone. If you'd like to do so please see the Contributing Guide first to get started.

0.0.1 - May 7, 2018

  • Initial Android proof of concept
  • Fix hot-reload issue #15
  • Add camera animation functions #18
  • Add experimental note to README.md #26
  • Add min/max zoomlevel API #27
  • Add overview screen to example application #29
  • Bugfix on easeTo, update examples #31
  • Add Style API #32
  • Add improved README.md, add contributing file #33
  • Add Projection API #36
  • Fix pixelated/overzoomed map #40

example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'flutter_animation.dart';
import 'flutter_list.dart';
import 'flutter_tabbar.dart';
import 'mapbox_camera.dart';
import 'mapbox_minmaxzoomlevel.dart';
import 'mapbox_style.dart';
import 'mapbox_projection.dart';

Future<Null> main() async {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new OverviewScreen(),
    );
  }
}

// shows an expandable list of examples
class OverviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Flutter Mapbox GL'),
      ),
      body: new ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            new EntryItem(data[index], context),
        itemCount: data.length,
      ),
    );
  }
}

final List<Entry> data = <Entry>[
  new ExpansionEntry(
    'Mapbox API',
    <ScreenEntry>[
      new ScreenEntry('Camera Animations', new CameraDemo()),
      new ScreenEntry('Min/Max Zoom Levels', new MinMaxZoomLevelDemo()),
      new ScreenEntry('Style API', new StyleDemo()),
      new ScreenEntry('Projection', new ProjectionDemo())
    ],
  ),
  new ExpansionEntry(
    'Flutter integration',
    <ScreenEntry>[
      new ScreenEntry('Animation', new AnimationDemo()),
      new ScreenEntry('List integration', new ListDemo()),
      new ScreenEntry('Tabs integration', new TabBarDemo()),
    ],
  )
];

abstract class Entry {
  Entry(this.title);

  final String title;
}

class ScreenEntry extends Entry {
  ScreenEntry(String title, this.screen) : super(title);

  final Widget screen;
}

class ExpansionEntry extends Entry {
  ExpansionEntry(String title, this.children) : super(title);

  final List<Entry> children;
}

class EntryItem extends StatelessWidget {
  const EntryItem(this.entry, this.context);

  final Entry entry;
  final BuildContext context;

  Widget _buildTiles(Entry root) {
    if (root is ScreenEntry) {
      return new ListTile(
          title: new Text(root.title),
          onTap: () {
            Navigator.push(
              context,
              new MaterialPageRoute(builder: (context) => root.screen),
            );
          });
    } else {
      return new ExpansionTile(
        key: new PageStorageKey<Entry>(root),
        title: new Text(root.title),
        children: (root as ExpansionEntry).children.map(_buildTiles).toList(),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  mapbox_gl: "^0.0.1"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


      import 'package:mapbox_gl/controller.dart';

      import 'package:mapbox_gl/flutter_mapbox.dart';

      import 'package:mapbox_gl/overlay.dart';
  
Version Uploaded Documentation Archive
0.0.1 May 7, 2018 Go to the documentation of mapbox_gl 0.0.1 Download mapbox_gl 0.0.1 archive

Analysis

We analyzed this package on Jul 13, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3
  • Flutter: 0.5.4

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
81 / 100
Health:
Code health derived from static analysis. [more]
99 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
90
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run flutter format to format lib/controller.dart.

    Run flutter format to format lib/overlay.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.10
meta 1.1.5
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6 2.0.7