In this article, we’ll guide you through the process of integrating the OSM Flutter plugin into your Flutter application. This powerful library allows you to utilize OpenStreetMap’s extensive mapping capabilities in a seamless and intuitive manner. Whether you’re developing for Android, iOS, or the web, this guide will equip you with the necessary steps and knowledge to enhance your application with rich mapping features.

Platform Support

• Android: Supported ✅
• iOS: Supported ✅ (minimum iOS supported: 13)
• Web: Supported ✅

Features of the OSM Flutter Plugin

This plugin offers a wide range of functionalities, including:

• Current position tracking
• Manual marker creation
• Custom marker icons
• Zooming into specific regions
• Drawing roads and shapes
• Listening for location changes
• Address suggestions

Installing the OSM Flutter Plugin

To add the OSM Flutter Plugin to your project, follow these steps:

dependencies:
  flutter_osm_plugin: ^1.3.3+1

Integration with Hooks

If you want to integrate the OSM Flutter Plugin with the Flutter Hooks library, you’ll need to use the extension library available on pub.dev.

Basic Usage

Here’s how you can create a basic OSM map in Flutter:

OSMFlutter(
  controller: mapController,
  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,
        ),
      ),
    ),
  ),
);

Think of creating a map like preparing a delicious salad. Each ingredient (or option in our code) plays a crucial role in building the final dish. The OSMFlutter serves as the salad bowl, carrying all toppings and dressings together for a delightful experience.

Map Controller

To control the OSM map, declare a MapController:

MapController controller = MapController(
  initPosition: GeoPoint(latitude: 47.4358055, longitude: 8.4737324),
  areaLimit: BoundingBox(
    east: 10.4922941,
    north: 47.8084648,
    south: 45.817995,
    west:  5.9559113,
  ),
);

This controller allows you to manage various attributes, including initialization position, area limits, and tracking options for the map.

Troubleshooting

While integrating the OSM Flutter Plugin, you may encounter some common issues:

• SSL Certificate Exception: You can use HTTP instead of HTTPS by enabling the useSecureURL and adding android:usesCleartextTraffic=true in your manifest.
• Build Errors: If you face build errors in a fresh project, try the following:
  • Remove the flutter_osm_plugin from pubspec.yaml, then run pub get.
  • Open the android module in Android Studio and update the Gradle and Kotlin versions.
  • Add the flutter_osm_plugin back and run pub get again.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.