Flutter Map Tappable Polyline

A Polyline with onTap event listener. This is a plugin for the flutter_map package.

Usage

To use flutter_map_tappable_polyline, add both flutter_map and flutter_map_tappable_polyline to your pubspec.yaml:

dependencies:
  flutter_map: ^6.0.1
  flutter_map_tappable_polyline: any # take latest version on Pub

Example Implementation

Here’s a complete example demonstrating how to use flutter_map_tappable_polyline in a Flutter application:

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_tappable_polyline/flutter_map_tappable_polyline.dart';
import 'package:latlong2/latlong.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tappable Polyline Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Tappable Polyline Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<LatLng> getPoints(int index) {
    // Sample points for demonstration purposes
    if (index == 0) {
      return [
        LatLng(45.1313258, 5.5171205),
        LatLng(45.1313259, 5.5171206),
        LatLng(45.1313260, 5.5171207)
      ];
    } else if (index == 1) {
      return [
        LatLng(45.1313258, 5.5171205),
        LatLng(45.1313259, 5.5171208),
        LatLng(45.1313260, 5.5171209)
      ];
    }
    return [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title!)),
      body: FlutterMap(
        options: MapOptions(initialCenter: LatLng(45.1313258, 5.5171205), initialZoom: 11.0),
        children: [
          TileLayer(
            urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            subdomains: ['a', 'b', 'c'],
          ),
          TappablePolylineLayer(
            polylineCulling: true,
            pointerDistanceTolerance: 20,
            polylines: [
              TaggedPolyline(
                tag: 'My Polyline',
                points: getPoints(0),
                color: Colors.red,
                strokeWidth: 9.0,
              ),
              TaggedPolyline(
                tag: 'My 2nd Polyline',
                points: getPoints(1),
                color: Colors.black,
                strokeWidth: 3.0,
              ),
              TaggedPolyline(
                tag: 'My 3rd Polyline',
                points: getPoints(0),
                color: Colors.blue,
                strokeWidth: 3.0,
              ),
            ],
            onTap: (polylines, tapPosition) => print('Tapped: ' +
                polylines.map((polyline) => polyline.tag).join(',') +
                ' at ' +
                tapPosition.globalPosition.toString()),
            onMiss: (tapPosition) {
              print('No polyline was tapped at position ' +
                  tapPosition.globalPosition.toString());
            },
          )
        ],
      ),
    );
  }
}

Explanation

• Dependencies: Ensure you have added flutter_map and flutter_map_tappable_polyline dependencies in your pubspec.yaml.
• Map Initialization: Initialize your map using FlutterMap widget.
• Tile Layer: Add a tile layer to render the base map.
• Tappable Polyline Layer: Use TappablePolylineLayer to add clickable polylines to your map.
• Handling Events: Implement onTap and onMiss callbacks to handle user interactions with polylines.

This setup will allow users to click on polylines displayed on the map, triggering the respective callback functions.