Add support for polygon holes for Apple Maps and Google Maps on iOS

[therealgilles]

Here is my attempt at implementing polygon holes for Apple Maps and Google Maps on iOS. See an attached screenshot showing isochrons on Apple Maps.

I have not programmed in Objective C before, so there may be issues with the code. Feel free to let me know.

[gilbox]

cool! please add an RN example for this.

[gilbox]

@therealgilles you think you'll be able to add an example?

[therealgilles]

@gilbox: Yes, I need a few more days, sorry for the delay.

[therealgilles]

@gilbox: I added support for holes in the Polygon Creator example. Is that okay or would you want me to do it a different way?

While doing this, I noticed that the holes inside holes behave differently in Apple Maps versus Google Maps. In Apple Maps, making a hole inside a hole recovers the original polygon for that area. In Google Maps, it has no effect, i.e. the area stays as part of the hole. This is most likely due to the difference in implementation between Apple MkPolygon versus Google GMSPolygon.

PS: I had to increase the editing id every time a new point is added to a hole to trigger a render refresh. Otherwise React does not see the change as it's in an array inside an array inside an object.

[gilbox]

@therealgilles you have some linting errors

/home/travis/build/airbnb/react-native-maps/example/examples/PolygonCreator.js
   48:13  error  'polygons' is assigned a value but never used         no-unused-vars
   56:15  error  Missing trailing comma                                comma-dangle
   57:12  error  Missing trailing comma                                comma-dangle
   61:11  error  'holes' is never reassigned. Use 'const' instead      prefer-const
   67:13  error  Expected property shorthand                           object-shorthand
   68:12  error  Missing trailing comma                                comma-dangle
   86:7   error  Unexpected if as the only statement in an else block  no-lonely-if
   97:13  error  'holes' is never reassigned. Use 'const' instead      prefer-const
  109:13  error  Expected property shorthand                           object-shorthand

[therealgilles]

Nice lint checks! All fixed finally.

Mentioning that the AirMaps.xcodeproj xcode project and libAirMaps.a library need to be updated, and I don't know how to do that. I would also be nice to have project file and library for Google Maps, and instructions on how to rebuild them.

[alvelig]

@therealgilles Mind sharing code for Isochrones?

[therealgilles]

Hi @alvelig, the isochrones were created by getting data from different isochron APIs (navitia, here, route360), massaging it, and displaying it using react-native-maps.

This was part of a react-native project called Traveller (which hasn't been worked on for a long time now). Some of the files involved are here:

https://github.com/Alabaster-Aardvarks/traveller/blob/develop/traveller/App/Containers/isochron.js
https://github.com/Alabaster-Aardvarks/traveller/tree/develop/traveller/App/Workers

I hope this helps. Let me know if you have questions. The code is not fresh in my mind but I would do my best.

[alvelig]

@therealgilles great, thank you! I was surprised with so rounded corners and still can't figure out how to achieve this XD Could you give me an idea, is it something obvious that I'm missing?

[therealgilles]

@alvelig, you get rounded corners the same way you draw a circle: optical illusion created by using a lot of points. If you zoom in, you will see it is a succession of very small lines connected together.

[alvelig]

Yes-yes, that was my best suggestion, but do these approximated points already come from those apis, don't they?

[therealgilles]

Yes they do. I actually had to trim the API data because they were giving too many points and displaying the isochrons was too slow.