[FEATURE] Interactive `Polygon`s

[ibisoda]

Hi,

I'm trying to reimplement an existing Leaflet-based app using flutter. In that app, the developer used Polygons to display the outline of a building, which when clicked/tapped shows additional information. and changes the polygon.

I'm trying to replicate that function, however I noticed there is no onTap Listener, at least for Polygons. Is there a different way to listen to tap events?

[matyhaty]

We are also looking at a onTap of a polygon / live.

Would be very helpful to us

We have some developers here also, so if someone can point us in the right direction we are happy to contribute

[neokree]

From what I found it exist a onTap method, settable from the MapOptions. However this returns a LatLng object of the position tapped, so it seems like that it is not "binded" to any Polygon, Line, Marker etc.

[neokree]

Just for anyone interested, I just translated in dart a function to find if a position is inside a Polygon

/// Translated from PHP
/// Source: https://assemblysys.com/php-point-in-polygon-algorithm/
bool _pointInPolygon(LatLng position, Polygon polygon) {
  // Check if the point sits exactly on a vertex
  var vertexPosition = polygon.points
      .firstWhere((point) => point == position, orElse: () => null);
  if (vertexPosition != null) {
    return true;
  }

  // Check if the point is inside the polygon or on the boundary
  int intersections = 0;
  var verticesCount = polygon.points.length;

  for (int i = 1; i < verticesCount; i++) {
    LatLng vertex1 = polygon.points[i - 1];
    LatLng vertex2 = polygon.points[i];

    // Check if point is on an horizontal polygon boundary
    if (vertex1.latitude == vertex2.latitude &&
        vertex1.latitude == position.latitude &&
        position.longitude > min(vertex1.longitude, vertex2.longitude) &&
        position.longitude < max(vertex1.longitude, vertex2.longitude)) {
      return true;
    }

    if (position.latitude > min(vertex1.latitude, vertex2.latitude) &&
        position.latitude <= max(vertex1.latitude, vertex2.latitude) &&
        position.longitude <= max(vertex1.longitude, vertex2.longitude) &&
        vertex1.latitude != vertex2.latitude) {
      var xinters = (position.latitude - vertex1.latitude) *
              (vertex2.longitude - vertex1.longitude) /
              (vertex2.latitude - vertex1.latitude) +
          vertex1.longitude;
      if (xinters == position.longitude) {
        // Check if point is on the polygon boundary (other than horizontal)
        return true;
      }
      if (vertex1.longitude == vertex2.longitude ||
          position.longitude <= xinters) {
        intersections++;
      }
    }
  }

  // If the number of edges we passed through is odd, then it's in the polygon.
  return intersections % 2 != 0;
}

[synw]

This lib can do it as well. The problem is that this kind of brute force geofencing is really slow so not user friendly. If you have a lot of polygons it is not appropriate. It would be much better to have an on tap callback.

[spvalencia]

It would be great to have onTap event for polygons and polylines. I also need that feature but I have not be able to find a good way to implemented.

[MichalMisiaszek]

Interestingly enough the same authors created map_view plugin which uses static Google Maps and provide listeners for polygon layers. @johnpryan how difficult it to add to flutter_map ?

[MichalMisiaszek]

Just for anyone interested, I just translated in dart a function to find if a position is inside a Polygon

/// Translated from PHP
/// Source: https://assemblysys.com/php-point-in-polygon-algorithm/
bool _pointInPolygon(LatLng position, Polygon polygon) {
  // Check if the point sits exactly on a vertex
  var vertexPosition = polygon.points
      .firstWhere((point) => point == position, orElse: () => null);
  if (vertexPosition != null) {
    return true;
  }

  // Check if the point is inside the polygon or on the boundary
  int intersections = 0;
  var verticesCount = polygon.points.length;

  for (int i = 1; i < verticesCount; i++) {
    LatLng vertex1 = polygon.points[i - 1];
    LatLng vertex2 = polygon.points[i];

    // Check if point is on an horizontal polygon boundary
    if (vertex1.latitude == vertex2.latitude &&
        vertex1.latitude == position.latitude &&
        position.longitude > min(vertex1.longitude, vertex2.longitude) &&
        position.longitude < max(vertex1.longitude, vertex2.longitude)) {
      return true;
    }

    if (position.latitude > min(vertex1.latitude, vertex2.latitude) &&
        position.latitude <= max(vertex1.latitude, vertex2.latitude) &&
        position.longitude <= max(vertex1.longitude, vertex2.longitude) &&
        vertex1.latitude != vertex2.latitude) {
      var xinters = (position.latitude - vertex1.latitude) *
              (vertex2.longitude - vertex1.longitude) /
              (vertex2.latitude - vertex1.latitude) +
          vertex1.longitude;
      if (xinters == position.longitude) {
        // Check if point is on the polygon boundary (other than horizontal)
        return true;
      }
      if (vertex1.longitude == vertex2.longitude ||
          position.longitude <= xinters) {
        intersections++;
      }
    }
  }

  // If the number of edges we passed through is odd, then it's in the polygon.
  return intersections % 2 != 0;
}

I used diffrent trick. Each polygon in lat/lng space I convert into a path in x/y space. Then using 2d geometry functions of path I can check if given point is inside specific path (which I can connect to specific polygon). Works pretty fast.

[synw]

Interesting. Do you have some code that we could see? I'm trying to do more or less the same thing using the geohex encoding format

[MichalMisiaszek]

Interesting. Do you have some code that we could see? I'm trying to do more or less the same thing using the geohex encoding format

So I am using some classes from actual map plugin to convert points from lat/lng to x/y.
I iterate over all polygons and store paths in List in the same order.

import 'dart:ui' as ui;

 ui.Path convertPolygon(Polygon polygon) {
    CustomPoint _customPoint;
    List<Offset> _offsets = new List<Offset>();
    ui.Path _polygonPath = new ui.Path();
    polygon.points.forEach((point) {
      _customPoint =  _mapOptions.crs.latLngToPoint(point, _mapOptions.zoom);
      _offsets.add(new Offset(_customPoint.x, _customPoint.y));
    });
    _polygonPath.addPolygon(_offsets, true);
    return _polygonPath;
  }

and then:

  Polygon getPolygonWithPosition(LatLng _position)  {
    CustomPoint _customPoint = _mapOptions.crs.latLngToPoint(_position, _mapOptions.zoom);
    Offset _offset = new Offset(_customPoint.x, _customPoint.y);
    int _index = -1;
    _polygonPaths.forEach((path) {
      _index ++;
      if (path.contains(_offset)) {
        return;
      }
    });
    return _polygons[index];
  }

[GregorySech]

PSA getPolygonWithPosition does not compile, you need to convert to the classic for(var path in _polygonPaths) loop.

[MichalMisiaszek]

PSA getPolygonWithPosition does not compile, you need to convert to the classic for(var path in _polygonPaths) loop.

I just changed code in answer from original. Let me fix it. Fixed.

[GregorySech]

I do not enjoy being pedantic but using return does not stop functional forEach, the intent is clear tho.
EDIT:
int _index = _polygonPaths.indexWhere((path) => path.contains(_offset));
Could be an alternative to forEach.

[aleffabricio]

It would be great to have onTap event for polygons and polylines. I also need that feature but I have not be able to find a good way to implemented.

Hello, @spvalencia, this library has been implemented https://github.com/synw/geodraw, sometimes it helps you in some way.

[spvalencia]

Hi @aleffabricio. Thank you so much. I'm going to check it out.