ola_maps_flutter 0.2.0

A Flutter plugin for integrating Ola Maps SDK. Provides interactive maps with markers, polylines, circles, polygons, bezier curves, and marker clustering.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'package:ola_maps_flutter/ola_map_view_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  OlaMapController? _controller; // Changed from _controller
  late OlaRoutingService _routingService; // New
  String? _lastMarkerId;
  String? _lastPolylineId;
  String? _lastCircleId;
  String? _lastPolygonId;
  String? _lastBezierCurveId;

  // Example locations: Store and Order
  final double storeLat = 18.76029027465273;
  final double storeLng = 73.3814242364375;
  final double orderLat = 18.73354223011708;
  final double orderLng = 73.44587966939002;
  
  String? routePolylineId; // New

  @override
  void initState() {
    super.initState();
    // Initialize routing service with API key
    _routingService = OlaRoutingService(apiKey: "YOUR_API_KEY");
    _requestLocationPermission(); // Kept original permission request
  }

  Future<void> _requestLocationPermission() async {
    await Permission.location.request();
  }

  void _addMarker() async {
    if (_controller != null) {
      final markerId = await _controller!.addMarker(
        position: const OlaLatLng(18.52145653681468, 73.93178277572254),
        isClickable: true,
        iconRotation: 0.0,
        isAnimationEnabled: true,
        snippet: "Ola Campus",
        subSnippet: "Tap to see more info",
        isInfoWindowDismissOnClick: true,
      );
      setState(() {
        _lastMarkerId = markerId;
      });
      print('Marker added with InfoWindow: $markerId');
    }
  }

  void _removeMarker() {
    if (_controller != null && _lastMarkerId != null) {
      _controller!.removeMarker(_lastMarkerId!);
      print('Marker removed: $_lastMarkerId');
      setState(() {
        _lastMarkerId = null;
      });
    }
  }

  void _addPolyline() async {
    if (_controller != null) {
      final polylineId = await _controller!.addPolyline(
        points: const [
          OlaLatLng(18.52145653681468, 73.93178277572254),
          OlaLatLng(18.52345653681468, 73.93378277572254),
          OlaLatLng(18.52545653681468, 73.93578277572254),
        ],
        color: "#FF0000",
        width: 5.0,
      );
      setState(() {
        _lastPolylineId = polylineId;
      });
      print('Polyline added: $polylineId');
    }
  }

  void _removePolyline() {
    if (_controller != null && _lastPolylineId != null) {
      _controller!.removePolyline(_lastPolylineId!);
      print('Polyline removed: $_lastPolylineId');
      setState(() {
        _lastPolylineId = null;
      });
    }
  }

  void _addCircle() async {
    if (_controller != null) {
      final circleId = await _controller!.addCircle(
        center: const OlaLatLng(18.52145653681468, 73.93178277572254),
        radius: 500.0,
        color: "#0000FF",
        opacity: 0.3,
      );
      setState(() {
        _lastCircleId = circleId;
      });
      print('Circle added: $circleId');
    }
  }

  void _removeCircle() {
    if (_controller != null && _lastCircleId != null) {
      _controller!.removeCircle(_lastCircleId!);
      print('Circle removed: $_lastCircleId');
      setState(() {
        _lastCircleId = null;
      });
    }
  }

  void _addPolygon() async {
    if (_controller != null) {
      final polygonId = await _controller!.addPolygon(
        points: const [
          OlaLatLng(18.52145653681468, 73.93178277572254),
          OlaLatLng(18.52345653681468, 73.93378277572254),
          OlaLatLng(18.52545653681468, 73.93578277572254),
          OlaLatLng(18.52545653681468, 73.93178277572254),
        ],
        color: "#00FF00",
      );
      setState(() {
        _lastPolygonId = polygonId;
      });
      print('Polygon added: $polygonId');
    }
  }

  void _removePolygon() {
    if (_controller != null && _lastPolygonId != null) {
      _controller!.removePolygon(_lastPolygonId!);
      print('Polygon removed: $_lastPolygonId');
      setState(() {
        _lastPolygonId = null;
      });
    }
  }

  void _addBezierCurve() async {
    if (_controller != null) {
      final curveId = await _controller!.addBezierCurve(
        startPoint: const OlaLatLng(18.52145653681468, 73.93178277572254),
        endPoint: const OlaLatLng(18.52545653681468, 73.93578277572254),
        color: "#FF00FF",
        width: 4.0,
      );
      setState(() {
        _lastBezierCurveId = curveId;
      });
      print('Bezier curve added: $curveId');
    }
  }

  void _removeBezierCurve() {
    if (_controller != null && _lastBezierCurveId != null) {
      _controller!.removeBezierCurve(_lastBezierCurveId!);
      print('Bezier curve removed: $_lastBezierCurveId');
      setState(() {
        _lastBezierCurveId = null;
      });
    }
  }

  void _zoomToOlaCampus() {
    if (_controller != null) {
      _controller!.zoomToLocation(
        const OlaLatLng(18.52145653681468, 73.93178277572254),
        16.0,
      );
      print('Zoomed to Ola Campus');
    }
  }

  void _getCurrentLocation() async {
    if (_controller != null) {
      final location = await _controller!.getCurrentLocation();
      if (location != null) {
        print('Current location: ${location.latitude}, ${location.longitude}');
      } else {
        print('Location not available');
      }
    }
  }

  void _toggleCurrentLocation() {
    if (_controller != null) {
      // Toggle between showing and hiding
      _controller!.showCurrentLocation();
      print('Showing current location');
    }
  }

  void _zoomToCurrentLocation() async {
    if (_controller != null) {
      final location = await _controller!.getCurrentLocation();
      if (location != null) {
        await _controller!.zoomToLocation(location, 15.0);
        print('Zoomed to current location: ${location.latitude}, ${location.longitude}');
      } else {
        print('Could not get current location');
      }
    }
  }

  void _fetchAndDrawRoute() async {
    if (_controller == null) return;
    
    try {
      print('Fetching route from ($storeLat, $storeLng) to ($orderLat, $orderLng)');
      
      // Fetch route from API
      final routePoints = await _routingService.getDirections(
        originLat: storeLat,
        originLng: storeLng,
        destLat: orderLat,
        destLng: orderLng,
      );
      
      print('Route has ${routePoints.length} points');
      
      // Convert to OlaLatLng list
      final olaPoints = routePoints.map((point) => 
        OlaLatLng(point['lat']!, point['lng']!)
      ).toList();
      
      // Remove old route if exists
      if (routePolylineId != null) {
        await _controller!.removePolyline(routePolylineId!);
      }
      
      // Draw route as polyline
      final polylineId = await _controller!.addPolyline(
        points: olaPoints,
        color: "#0000FF", // Blue route
        width: 5.0,
      );
      
      setState(() {
        routePolylineId = polylineId;
      });
      
      // Add markers for store and order locations
      await _controller!.addMarker(
        position: OlaLatLng(storeLat, storeLng),
        snippet: "Store Location",
        subSnippet: "Pickup point",
      );
      
      await _controller!.addMarker(
        position: OlaLatLng(orderLat, orderLng),
        snippet: "Order Location",
        subSnippet: "Delivery point",
      );
      
      print('Route drawn successfully: $polylineId');
      
      // Zoom to show both locations
      // Calculate center point
      final centerLat = (storeLat + orderLat) / 2;
      final centerLng = (storeLng + orderLng) / 2;
      await _controller!.zoomToLocation(OlaLatLng(centerLat, centerLng), 12.0);
      
    } catch (e) {
      print('Error drawing route: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Ola Map Plugin Example'),
        ),
        body: Stack(
          children: [
            OlaMapView(
              apiKey: "YOUR_API_KEY",
              onMapCreated: (id) {
                print("Map created with id: $id");
              },
              onControllerReady: (controller) {
                setState(() {
                  _controller = controller;
                });
                print("Controller ready");
                // Zoom to current location first
                _zoomToCurrentLocation();
                // Then fetch and draw the route
                Future.delayed(const Duration(seconds: 2), () {
                  _fetchAndDrawRoute();
                });
              },
              showZoomControls: true,
              showCompass: true,
              showMyLocationButton: true,
              myLocationEnabled: true,
              zoomGesturesEnabled: true,
              scrollGesturesEnabled: true,
              tiltGesturesEnabled: true,
              rotateGesturesEnabled: true,
              doubleTapGesturesEnabled: true,
            ),
            Positioned(
              bottom: 20,
              right: 20,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  FloatingActionButton(
                    heroTag: 'add_marker',
                    onPressed: _controller == null ? null : _addMarker,
                    child: const Icon(Icons.add_location),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'remove_marker',
                    onPressed: _lastMarkerId == null ? null : _removeMarker,
                    child: const Icon(Icons.remove_circle),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'add_polyline',
                    backgroundColor: Colors.blue,
                    onPressed: _controller == null ? null : _addPolyline,
                    child: const Icon(Icons.timeline),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'remove_polyline',
                    backgroundColor: Colors.red,
                    onPressed: _lastPolylineId == null ? null : _removePolyline,
                    child: const Icon(Icons.clear),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'add_circle',
                    backgroundColor: Colors.green,
                    onPressed: _controller == null ? null : _addCircle,
                    child: const Icon(Icons.circle_outlined),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'remove_circle',
                    backgroundColor: Colors.orange,
                    onPressed: _lastCircleId == null ? null : _removeCircle,
                    child: const Icon(Icons.cancel_outlined),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'add_polygon',
                    backgroundColor: Colors.purple,
                    onPressed: _controller == null ? null : _addPolygon,
                    child: const Icon(Icons.hexagon_outlined),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'remove_polygon',
                    backgroundColor: Colors.brown,
                    onPressed: _lastPolygonId == null ? null : _removePolygon,
                    child: const Icon(Icons.delete_outline),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'add_bezier',
                    backgroundColor: Colors.pink,
                    onPressed: _controller == null ? null : _addBezierCurve,
                    child: const Icon(Icons.show_chart),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'remove_bezier',
                    backgroundColor: Colors.teal,
                    onPressed: _lastBezierCurveId == null ? null : _removeBezierCurve,
                    child: const Icon(Icons.close),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'draw_route',
                    backgroundColor: Colors.deepPurple,
                    onPressed: _controller == null ? null : _fetchAndDrawRoute,
                    child: const Icon(Icons.route),
                  ),
                ],
              ),
            ),
            // Zoom controls on the left
            Positioned(
              bottom: 20,
              left: 20,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  FloatingActionButton(
                    heroTag: 'zoom_in',
                    onPressed: _controller == null ? null : () => _controller!.zoomIn(),
                    child: const Icon(Icons.add),
                  ),
                  const SizedBox(height: 10),
                  FloatingActionButton(
                    heroTag: 'zoom_out',
                    onPressed: _controller == null ? null : () => _controller!.zoomOut(),
                    child: const Icon(Icons.remove),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 16),
            FloatingActionButton(
              onPressed: _controller == null ? null : () async {
                await _controller!.updateMarker(
                  markerId: "marker_1",
                  iconAnchor: "center",
                  iconRotation: 45.0,
                  snippet: "Updated Snippet",
                  subSnippet: "Rotated & Centered",
                  iconSize: 1.5,
                );
                print("Marker updated");
              },
              child: const Icon(Icons.edit_location),
            ),
          ],
        ),
      ),
    );
  }
}