Skip to content

Integrating OpenStreetMap in Your Flutter App with flutter_osm_plugin

Welcome back, everyone! Today, we’re diving into a topic that’s essential for many Flutter developers: integrating maps into your app. While Google Maps is a popular choice, it comes with certain limitations and costs that might not suit everyone. Fortunately, there’s an excellent open-source alternative: OpenStreetMap (OSM) using the flutter_osm_plugin. In this post, I’ll guide you through the process of integrating OSM into your Flutter app, step by step.

Creating a New Flutter Project

First, let’s start by creating a new Flutter project. Open your terminal and run:

flutter create osm_example

Once the project is created, navigate to the project directory:

cd osm_example

Open the project in your preferred code editor, such as Visual Studio Code:

code .

Adding Dependencies

Next, we need to add the flutter_osm_plugin dependency to our project. Open the pubspec.yaml file and add the following line under dependencies:

dependencies:
  flutter:
    sdk: flutter
  flutter_osm_plugin: ^1.0.5

Save the file and run:

flutter pub get

This will install the plugin and its dependencies.

Configuring Android-Specific Settings

Most of the configuration steps are required for the Android platform. We need to update some files in the Android directory to ensure our app works correctly with OSM.

1. Updating AndroidManifest.xml

Navigate to android/app/src/main/AndroidManifest.xml and add the following permissions inside the <manifest> tag:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

These permissions are necessary for accessing the device’s location.

2. Modifying build.gradle

Next, open android/app/build.gradle and update the minimum SDK version and enable multiDex. Add the following lines inside the android block:

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 21
        multiDexEnabled true
    }
    ...
}

These settings ensure compatibility and better performance for your app.

Implementing the Map Widget

Now, let’s move on to the exciting part: implementing the OSM map widget in our Flutter app. We’ll start by creating a new Dart file for our map page.

1. Creating the Map Page

In the lib directory, create a new file called map_page.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:flutter_osm_plugin/flutter_osm_plugin.dart';

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OpenStreetMap Example"),
      ),
      body: OSMFlutter(
        controller: MapController(
          initPosition: GeoPoint(latitude: 47.4358055, longitude: 8.4737324),
          initMapWithUserPosition: false,
        ),
        osmOption: OSMOption(
          userTrackingOption: UserTrackingOption(
            enableTracking: true,
            unFollowUser: false,
          ),
          zoomOption: ZoomOption(
            initZoom: 8,
            minZoomLevel: 3,
            maxZoomLevel: 19,
            stepZoom: 1.0,
          ),
          userLocationMarker: UserLocationMaker(
            personMarker: MarkerIcon(
              icon: Icon(
                Icons.location_history_rounded,
                color: Colors.red,
                size: 48,
              ),
            ),
            directionArrowMarker: MarkerIcon(
              icon: Icon(
                Icons.double_arrow,
                size: 48,
              ),
            ),
          ),
          roadConfiguration: RoadOption(
            roadColor: Colors.yellowAccent,
          ),
          markerOption: MarkerOption(
            defaultMarker: MarkerIcon(
              icon: Icon(
                Icons.person_pin_circle,
                color: Colors.blue,
                size: 56,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This code creates a basic map page with various configurations, including user tracking, zoom options, and custom markers.

2. Updating main.dart

Open lib/main.dart and update it to include the new map page:

import 'package:flutter/material.dart';
import 'map_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapPage(),
    );
  }
}

Running the App

With all the configurations and implementations in place, let’s run our app. Open your terminal and run:

flutter run

Select an Android emulator or connect an Android device to see the map in action. If everything is set up correctly, you should see an OpenStreetMap displayed on your screen with the configurations we specified.

Conclusion

Integrating OpenStreetMap in your Flutter app is a great way to provide rich mapping capabilities without the constraints and costs associated with Google Maps. The flutter_osm_plugin makes it easy to add powerful map features, including user tracking, custom markers, and road drawing.

Thank you for following along! If you have any questions or run into any issues, feel free to leave a comment below. Happy coding!


Resources


I hope you find this guide helpful for integrating OSM into your Flutter apps. Stay tuned for more tutorials and updates!

Leave a Reply

Your email address will not be published. Required fields are marked *