• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Open Street Map Using Flutter
      Open Street Map 70X400

      Open Street Map Using Flutter

      • Posted by Shivam Srivastava
      • Categories Flutter
      • Date March 25, 2020
      Spread the love

      Introduction

      According to the Open Street Map Community, OpenStreetMap (OSM) is a cooperative project to make a free editable map of the Earth. … the information from OpenStreetMap will be used in varied ways that together with the production of paper maps and electronic maps (i.e. Google Maps), geocoding of address and place names, and route designing.


      Purpose of this article?

      As you may have understood from the title of this article that we will discuss how to integrate Open Street Map In Flutter. The Open Street Map is one of the map like Google Map, so follow all the below steps in sequence as given to integrating OSM in your flutter application successfully.


      Setup Flutter SDK

      If you don’t have a flutter set up in your machine so you have to need to install it first. Click here to learn how to set up flutter on Windows and for Linux click here.


      Add Dependencies

      • Add flutter_osm_plugin dependency in your project pubspec.yaml file.
      dependencies:
        flutter:
          sdk: flutter
        flutter_osm_plugin: <latest_version>

      Run flutter packages get command on terminal


      • Add the below code in your main.dart file for import dependency.
      import 'package:flutter_osm_plugin/flutter_osm_plugin.dart';

      Now we are ready to code the components.

        GlobalKey<OSMFlutterState> mapKey = GlobalKey<OSMFlutterState>();

      • Get current location latitude and longitude using the below code.
        getMyLocation()async
        {
          try {
            GeoPoint p = await mapKey.currentState.myLocation();
            double lat=p.latitude;
            double lon=p.longitude;
            print(  "latitude is :$lat,  longitude is:$lon");
          } on GeoPointException catch (e) {
             print( "${e.errorMessage()}");
          }
        }

      • Draw Road between two points using the below code.
        drawRoadOnMap()async
        {
          try {
            await mapKey.currentState.drawRoad(
                GeoPoint(latitude: 28.596429, longitude: 77.190628),
                GeoPoint(latitude: 28.4573802, longitude: 73.1424312));
          } on RoadException catch (e) {
            print( "${e.errorMessage()}");
          }
        }

      • Add the OSMFlutter widget in your UI part.
       OSMFlutter(
                  key: mapKey,
                  currentLocation: true,
                  road: Road(
                      startIcon: MarkerIcon(
                        icon: Icon(
                          Icons.person,
                          size: 64,
                          color: Colors.brown,
                        ),
                      ),
                      roadColor: Colors.blueAccent),
                  markerIcon: MarkerIcon(
                    icon: Icon(
                      Icons.person_pin_circle,
                      color: Colors.redAccent,
                      size: 56,
                    ),
                  ),
                  initPosition: GeoPoint(latitude: 28.4573802, longitude: 73.1424312),
                  useSecureURL: false,
                ),

      output:

      Open Street Map


      Get Complete source code.

      Bookmark(2)

      Please login to bookmark

      Continue with Google
      +1

      Tag:flutter maps, open source map api, Open street map flutter, osm maps

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      DETECT TEXT FROM IMAGE USING FIREBASE
      March 25, 2020

      Next post

      Microsoft Windows UI Goes Mainstream
      March 31, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now

      We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy