Adding stroke parameter in paint for polygon always result in filled polygons

[DinithHerath]

I added the geojson widget for FlutterMap as per the main.dart file and changed the polygonStyle function as follows.

  polygonStyle: (TileFeature feature) {
    var paint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.red.withOpacity(0.7)
      ..strokeWidth = 5
      ..isAntiAlias = false;
    
    if ("${feature.tags['NAME']}_${feature.tags['COUNTY']}" ==
            featureSelected) {
      return paint;
    }
    paint.color = Colors.yellow.withOpacity(0.6);
    paint.style = PaintingStyle.stroke;
    return paint;
  },

But the resulting map has polygon filled in yellow colour, not the stroked ones as required. Also when tapping the polygon also highlights in red colour but not in the stroked mode as defined in the above. Please refer the image for further understading.

Thanks for the amazing work.

[ibrierley]

Heya, thanks for the feedback. It's hard to see exactly whats happening there just from the image and not knowing what was tapped, but a couple of bits...

Firstly, it can't use a stroke on a style of a polygon. Polygons get sliced into tiles, so each area/county is actually several different polygons, so you would see the lines where the tiles are. So basically all polys must be filled and I think this is forced.

Secondly, I think there's a bug been introduced somewhere with the tapping, as a tap seems to be close but not always accurate and sometimes matches 2 states which is odd. Not sure if that's related to the geometry or the isPolyInside code (I suspect that). Not sure if this is related to your issue.

I'll let you know if I find anything. I haven't got a massive amount of time just do dig thoroughly atm just to be aware.

Thanks again!

[DinithHerath]

Hi,
I was able to resolve the above issue but there are kind of boxes inside the vector map. Can we remove them so that only polygons from geojson remains.

Thanks

[ibrierley]

No, the boxes can't be resolved for polygons. You need lineStrings for that.

[DinithHerath]

Hi Why those boxes are there? I think they are related to clustering.. Since when we turn on the clustering those count numbers are in the middle of this bounding boxes. Wdyt? Thanks for replying.

[DinithHerath]

And can we have a boundary line with polygons similar to the behavior of geojson.io so that the boundaries get highlighted when they are adjacent.

[ibrierley]

I'm not quite sure if you're talking about lines inside a polygon, or a box with a number in it If you turn clustering on you will get box with a number, and the number of points/markers inside it. If you make polygons not have a fill, you will get polylines with tile lines in the middle of them (which is why normally it's not an option). On Wed, Sep 28, 2022 at 8:31 AM Dinith Herath ***@***.***> wrote:

…

Hi Why those boxes are there? I think they are related to clustering.. Since when we turn on the clustering those count numbers are in the middle of this bounding boxes. Wdyt? Thanks for replying. On Wed, 28 Sep 2022 at 11:46, Ian ***@***.***> wrote: > No, the boxes can't be resolved for polygons. You need lineStrings for > that. > > — > Reply to this email directly, view it on GitHub > < #1 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AJ2BF47GW7MSJVSS76UPZALWAPPEPANCNFSM6AAAAAAQXDYD3U > > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> > -- *Dinith Herath* Fourth-Year Undergraduate Department of Electronic and Telecommunication Engineering University of Moratuwa Katubedda, Moratuwa 10400 Sri Lanka *mobile:* +94778370323 <http://+94778802768/> — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5I4X5C4PYQ35AORL2DWAPX4XANCNFSM6AAAAAAQXDYD3U> . You are receiving this because you commented.Message ID: ***@***.***>

[DinithHerath]

So we cannot highlight polygon boundaries, I mean can't we do it in dart level. Let's say we have feature type of a polygon, then fill with one color and highlight boundary with another color as in the below image.

[ibrierley]

I think if one wants to do that, it would need a separate polyline/lineString placed over it.

[DinithHerath]

Do you have any implementation in your mind? Like where to implement this.

[ibrierley]

Not really, I guess one could include both features (poly + lineString) in the geojson...if that's too much, and you are just selecting one feature out of lots, you could possibly just add a flutter_map polyline widget with the features points.

[ibrierley]

Btw I think I've fixed the isPointInPoly being slightly out sometimes if you were using that at all.

[ibrierley]

Btw if you explain your use case with the polylines, are they there all of the time, or just one offs dynamically on hightlight, I will have a ponder if there's any method I can add to the plugin

[DinithHerath]

So my use case is to highlight one polygon among all the polygons to show information of them. So when highlighting it should highlight border as well. Also if we take the US_county map all the polygons are adjacent hence user should see the boundaries to tap on them. This is the prominent use case I was worried about since without knowing the boundaries there is no point of tapping I guess. If you can address that, that would be idle.
Thanks always

[ibrierley]

Ok, I have added a change that may help....tiles are now clipped, and I've removed the force of using a fill.

So now, if you use "buffer" in your GeoJSONVTOptions eg...

late GeoJSONVT geoJsonIndex = GeoJSONVT({},GeoJSONVTOptions(buffer: 32));

Those lines will be clipped out. Note, you will probably need to make sure the buffer is bigger than half your strokeWidth that you use, but feel free to experiment.

One thing you may note though, is that if you have adjacent lines (like in US states), and you highlight one, by changing its colour, it may be that the highlighted line is partially "under" another. If you have that, you may need to add a separate index each time for each of those with a new GeoJSONWidget with just that one feature isolated out).

[DinithHerath]

Will check and let you know about your implementation. Greatly appreciate your hard work and responsiveness. May I know which timezone are you working so that I can get back to you if there's further issue regarding this. ❤️

[ibrierley]

I'm in the UK.

[DinithHerath]

Hi,
Sadly I'm still getting that grid lines even if I set the buffer to 32. Don't you have those lines in US_COUNTY file?

[ibrierley]

See if its any different now...git said some files weren't updated which is odd, so maybe I had missed something.

…

On Wed, Sep 28, 2022 at 3:25 PM Dinith Herath ***@***.***> wrote: Hi, Sadly I'm still getting that grid lines even if I set the buffer to 32. Don't you have those lines in US_COUNTY file? — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5YN5MWGDOAVPNSGMUOBJTWARIMFANCNFSM6AAAAAAQXDYD3U> . You are receiving this because you commented.Message ID: ***@***.***>

[DinithHerath]

Hi,
Thanks that worked and thank you for the support.

[DinithHerath]

Hi,
A quick question again. How to get the coordinates list of the polygon using the feature.geometry. We can do a json lookup though but it is inefficient when we have the coordinates in the point format.
I implemented this snippet but getting the wrong coordinates.

final geoPoints =
    (feature.geometry[0] as List).map((p) {
  final c = CustomPoint(p[0], p[1]);
  return Epsg3857().pointToLatLng(
      c, _mapController.zoom.floorToDouble());
}).toList();

[ibrierley]

You can't get the original list of coordinates, if you have a parameter eg "us_state", couldn't you store them in a map that you can quickly lookup though?

[ibrierley]

Oh I see, I missed the code, I thought you mean easily accessible rather than programmatically...there's an issue there though, that the feature has been sliced up into tiles. So one feature may be split of 2 or 3 tiles...so I don't think you would be able to retrieve the full features original coordinates in a reverse fashion (you may be able to for single points, but the lines/polys get sliced up).

[ibrierley]

Just out of interest, why do you need the original coordinates, is it to draw an outline or whatever on top ? I'll have a ponder, but it may be tomorrow before I reply now.

[DinithHerath]

Therefore the best thing is to lookup in the json. Right?

[ibrierley]

Yes, the fastest would probably be some sort of map lookup...maybe in the future I could have a link back in the feature.tags linking back to the original geojson feature or something, but not sure when that would be, or if there are any issues with that.

[ibrierley]

Btw I've added the option to save a "source" in the properties of a feature, so it will link back to the original geojson that was tapped for example.
So one can now add a kind of multi layered poly with different outline etc. Example is in lib/main.dart