React-native-mapbox-gl: Draw hexagon on top of maps and make interaction with user location

[MrHazimAli]

Hye, I have some question if that is possible using the package, I have been playing around with this package and wondering if I can make flooded area using vector and remove the specific vector layer for that specific location when user around the area.

something like this one..

initially user in first hexagon, and after walking and cross second hexagon, it will remove the layer.. currently I can only drawe shape to specific location inside mapbox studio and doesnt have interaction with user location right ?

Thank you @nitaliano ! :-)

[nitaliano]

Do the vertices of the hexagons need to point to an actual point on earth or are they just randomly placed all over the map?

[MrHazimAli]

they just randomly placed all over the map but initially they will cover all earth, and my point is that so when I at Kuala Lumpur, Hexagon on top of my location will disappear like picture on top.. and if I move from Kuala Lumpur to Malacca, hexagon on top of Malacca also will disappear..

[nitaliano]

My first thought would be

1. Generate a FeatureCollection of random Polygons to place on the map, each Polygon feature should have a boolean property called visited set to false initially

<MapboxGL.ShapeSource id='hexagonSource' shape={featureCollection}>
   <MapboxGL.FillLayer id='hexagonLayer' filter={['==', 'visited', false]} />
</MapboxGL.ShapeSource>

1. Use https://facebook.github.io/react-native/docs/geolocation.html to track user location
2. On every user location event query the map by the hexagonLayer using the users location
3. The top feature that is returned will be your Polygon feature, change it's property to visited=true, add your updated feature back into your feature collection.
4. Add updated feature collection into hexagon source

You can also have a source and layer for each hexagon it depends how you would like to structure your code.

[MrHazimAli]

oh, I see.. thanks @nitaliano for the assist! I will try first to generate featureCollection with geojson-random :-)

really appreciate your help and sorry for taking your time.
if it's okay, may I have your contact (email or etc) that's much easy to communicate?

Hope you have a wonderful day!

[nitaliano]

@MrHazimAli we have a gitter setup https://gitter.im/react-native-mapbox-gl/Lobby?source=orgpage that's the best way to get in touch with me besides posting issues here. Going to close this out feel free to ping me with any questions

[maciej-gurban]

@MrHazimAli I'm looking to do something very similar. Did you manage to do it in the end? Since I'm a total novice in this regard, could you point to some resource where I could learn how to generate the hexagons?

[MrHazimAli]

@maciej-gurban , yes I did based on what @nitaliano described.. if you want only some hexagon you can create the features collection by yourself using geojson.io.
the structure will be something like

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 101.6026782989502, 3.1327172123425724 ], [ 101.5975284576416, 3.127189391316073 ], [ 101.60147666931152, 3.122004354411925 ], [ 101.6073989868164, 3.1217472444775938 ], [ 101.61027431488036, 3.1272750941901393 ], [ 101.60641193389893, 3.132802914764517 ], [ 101.6026782989502, 3.1327172123425724 ] ] ] } } ] }

but for my cases, I need a leaflet hexagon.. thus there is no easy way that I could find to generate the hexagon. So, I ended up writing a script to generate edge of hexagon by calculation and append it to get the structure of features collection.

here is my sample code that I could share:
https://es6console.com/jk7njd5d/

and I used is inside ShapeSource component
<MapboxGL.ShapeSource id='hexagonSource' shape={featureCollection} />

some other reference that I think was helping:
1) http://jsfiddle.net/nathansnider/ts4oyyn0
2) https://math.stackexchange.com/questions/2254655/hexagon-grid-coordinate-system

hope it helps!

[maciej-gurban]

@MrHazimAli Thanks a lot! This will be very useful!