Flutter_map: Add onTap Polyline

Created on 27 Aug 2018  路  8Comments  路  Source: fleaflet/flutter_map

As a developer I want to select a polyline by tapping on it or by using a hit-test function for a specific LatLng.

help wanted

Most helpful comment

All 8 comments

For now I'm using the onTap method of the MapOptions class and the following simpleminded methods:

Polyline polylineHitTest(List<Polyline> polylines, LatLng point) {
  Polyline minPolyline;
  double minDist = double.maxFinite;
  polylines.forEach((p) {
    for (int i = 0; i < p.points.length - 1; i++) {
      double dist = distToSegment(point, p.points[i], p.points[i + 1]);
      if (dist < minDist) {
        minDist = dist;
        minPolyline = p;
      }
    }
  });
  return minPolyline;
}

double sqr(double x) {
  return x * x;
}

double dist2(LatLng v, LatLng w) {
  return sqr(v.longitude - w.longitude) + sqr(v.latitude - w.latitude);
}

double distToSegment(LatLng p, LatLng v, LatLng w) {
  return sqrt(distToSegmentSquared(p, v, w));
}

double distToSegmentSquared(LatLng p, LatLng v, LatLng w) {
  double l2 = dist2(v, w);
  if (l2 == 0) return dist2(p, v);
  double t = ((p.longitude - v.longitude) * (w.longitude - v.longitude) +
          (p.latitude - v.latitude) * (w.latitude - v.latitude)) /
      l2;
  t = max(0.0, min(1.0, t));
  return dist2(
      p,
      LatLng(v.latitude + t * (w.latitude - v.latitude),
          v.longitude + t * (w.longitude - v.longitude)));
}

I think it would be good to provide handlers for PolylineLayer, similar to leaflet's API : https://leafletjs.com/reference-1.3.4.html#polyline - pull requests are encouraged!

Think this will be good kind callback as guesture on the widget

This is not something I plan to add. Feel free to implement this as a plugin or make a pull request if you have a solution. I'm going to close this to keep the issues manageable. Thanks for your understanding.

@tuarrep cool! want to add it to the readme?

@johnpryan With pleasure!

Was this page helpful?
0 / 5 - 0 ratings