Flutter OSM - OSM Plugin For Flutter Apps

Overview

flutter_osm_plugin

pub

osm plugin for flutter apps (only Android for now, iOS will be supported in future)

  • current position
  • change position
  • tracking user location
  • customize Icon Marker
  • draw Road,recuperate information (duration/distance) of the current road
  • ClickListener on Marker
  • calculate distance between 2 points

Getting Started

Installing

Add the following to your pubspec.yaml file:

dependencies:
  flutter_osm_plugin: ^0.6.0

Simple Usage

Creating a basic OSMFlutter :

OSMFlutter( 
        controler:mapController,
        currentLocation: false,
        road: Road(
                startIcon: MarkerIcon(
                  icon: Icon(
                    Icons.person,
                    size: 64,
                    color: Colors.brown,
                  ),
                ),
                roadColor: Colors.yellowAccent,
        ),
        markerIcon: MarkerIcon(
        icon: Icon(
          Icons.person_pin_circle,
          color: Colors.blue,
          size: 56,
          ),
        ),
        initPosition: GeoPoint(latitude: 47.35387, longitude: 8.43609),
    );

Declare MapController to control osm map instead of using GlobalKey

Initialisation

MapController controller = MapController(
                            initMapWithUserPosition: false,
                            initPosition: GeoPoint(latitude: 47.4358055, longitude: 8.4737324),
                       );

dispose

     controller.dispose();

MapController

Properties Description
initMapWithUserPosition (bool) initialize map with user position (default:true
initPosition (GeoPoint) if it isn't null, the map will be pointed at this position

GlobalKey was deprecated

set map on user current position

await controller.currentPosition();

zoomIN

await controller.zoom(2.);
// or 
await controller.zoomIn();

zoomOut

await controller.zoom(-2.);
// or 
await controller.zoomOut();

track user current position

await controller.enableTracking();

disable tracking user position

await controller.disabledTracking();

initialise position

controller.changeLocation(GeoPoint(latitude: 47.35387, longitude: 8.43609));

recuperation current position

GeoPoint geoPoint = controller.myLocation();

select/create new position

GeoPoint geoPoint = controller.selectPosition();
  • PS : selected position can be removed by long press

remove marker

controller.removePosition(geoPoint);
  • PS : static position cannot be removed by this method

draw road,recuperate distance in km and duration in sec

RoadInfo roadInfo = await controller.drawRoad( GeoPoint(latitude: 47.35387, longitude: 8.43609),GeoPoint(latitude: 47.4371, longitude: 8.6136));
print("${roadInfo.distance}km");
print("${roadInfo.duration}sec");

delete last road

await controller.removeLastRoad();

change static geopoint position

you can use it if you don't have at first static position and you need to add staticPoints with empty list of geoPoints you can use it to change their position over time osmKey.currentState.setStaticPosition(List geoPoints,String id )

OSMFlutter

Properties Description
currentLocation enable the current position.
trackMyPosition enbaled tracking user position.
showZoomController show default zoom controller.
markerIcon set icon Marker
defaultZoom set default zoom to use in zoomIn()/zoomOut() (default 1)
road set color and start/end/middle markers in road
useSecureURL enabled secure urls
staticPoints List of Markers you want to show always ,should every marker have unique id
onGeoPointClicked (callback) listener triggered when marker is clicked ,return current geoPoint of the marker
onGeoPointClicked (callback) it is hire when you activate tracking and user position has been changed

STATIC METHODS:

calculate distance between 2 geopoint position

double distanceEnMetres = await distance2point(GeoPoint(longitude: 36.84612143139903,latitude: 11.099388684927824,), GeoPoint( longitude: 36.8388023164018, latitude: 11.096959785428027, ),);

NOTICE:

for now the map working only for android,iOS will be available soon

if you get ssl certfiction exception,use can use http by following instruction below

if you want to use http in Android PIE or above :

  • enable useSecureURL and add android:usesCleartextTraffic="true" in your manifest like example below :

if you faced build error in fresh project you need to follow those instruction ([#40])

1) remove flutter_osm_plugin from pubspec, after that pub get
2) open android module in android studio ( right click in name of project -> flutter-> open android module in android studio)
3) update gradle version to 4.1.1 ( IDE will show popup to make update)
4) update kotlin version to 1.4.21 & re-build the project
5) re-add flutter_osm_plugin in pubspec , pub get ( or flutter clean & pub get )

MIT LICENCE

You might also like...

A collection of sample apps that use Stream

A collection of sample apps that use Stream

Flutter samples Quick Links Register to get an API key for Stream Chat Flutter Chat Tutorial Chat UI Kit Flutter SDK Repo What is Stream? Stream allow

Dec 21, 2022

A set of counter apps made for #FlutterCounterChallenge2020

flutter_counter_challenge_2020 A set of counter apps made for #FlutterCounterChallenge2020. Run flutter create . inside the repository after cloning i

Dec 30, 2022

Ensiklopedi Multiplatform Apps

ensiklopedi A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Dec 9, 2021

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps.

Use dynamic and beautiful card view pagers (horizontal direction) to help you create great apps. Preview Mobile Vertical Card Pager Web Web Link Insta

Dec 9, 2022

Demonstrate how to easily program Android apps on Gitpod

Demonstrate how to easily program Android apps on Gitpod

Developing Android apps on Gitpod This project is intended to demonstrate how to easily program Android apps on Gitpod. It is based on this guide and

Dec 8, 2022

Flutterbase taxi - A large variety of apps depend on map services.

Flutterbase taxi - A large variety of apps depend on map services.

Flutterbase taxi A large variety of apps depend on map services. The purpose of this project was to test Google Map Services in connection with Flutte

Dec 29, 2022

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Jan 2, 2023

Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size.

desktop_window Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size. Usage import 'package:desktop_window/desktop_window.dart

Dec 2, 2022

Flute Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flute Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flute Music Player Plugin Only Updated to androidx First Open Source Flutter based material design music player with audio plugin to play local music

Nov 23, 2022
Owner
null
Firebase + Flutter sample apps with code snippets, supported by comprehensive articles for each implementation.

FlutterFire Samples This repo is created to contain various sample apps demonstrating the integration of Firebase with Flutter. The final goal is to c

Souvik Biswas 186 Dec 24, 2022
A flutter clean architecture series, the way we build clean apps.

Flutter Clean Archeticture Series ?? "Making the world a better place" ✅ Full Articles You can check out the full Medium articles on devmuaz ✅ Branche

AbdulMuaz Aqeel 267 Jan 4, 2023
Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Examples showing how to use Rid in order to build Dart/Flutter apps integrated with Rust.

Thorsten Lorenz 205 Dec 24, 2022
A Flutter starter-kit for production-level apps.

Flutter Starter Introduction We wanted to take Flutter a step further and accelerate the process of building production-level apps. Presenting our sol

GeekyAnts 374 Dec 30, 2022
Learn how to incorporate Firebase into our Flutter apps

Flash Chat ⚡️ Our Goal The objective of this tutorial is to learn how to incorporate Firebase into our Flutter apps. We'll be using Firebase Cloud Fir

null 0 Oct 27, 2021
Cooking apps - Cooking App made using flutter framework

cooking_apps Cooking App made using flutter framework. This template app contain

Viraj Shah 1 Jan 24, 2022
Mongolian vertical script widgets for Flutter apps

mongol This library is a collection of Flutter widgets for displaying traditional Mongolian vertical text. The primary widgets include: MongolText: ve

null 56 Dec 12, 2022
Easy and Fast internationalization for your Flutter Apps

Easy and Fast internationalization for your Flutter Apps Why easy_localization? ?? Easy translations for many languages ?? Load translations as JSON,

Aye7 672 Dec 18, 2022
fl_heatmap - A heatmap build for Flutter apps

fl_heatmap - A heatmap build for Flutter apps

Timo Bähr 6 Sep 19, 2022
Google UI is an open-source UI library for developing cross-platform apps using Flutter with Material Design 2.0

Google UI Google UI is an open-source UI library for developing cross-platform apps using Flutter with "Material Design 2.0" Table of contents Install

Ed Sulaiman 25 Dec 24, 2022