How I integrated OpenLayers in React Native

[@marvinfok65]

Thank you so much, there are so few OpenLayers map tutorials for react native in KZbin!

[@nickimberlin]

I need to build this 😮. You are some type of genius wizard! Thank you for the video!

[@PhanxDEV95]

Thank you for your nice comment :)

[@areshkaa]

you saved my life, man

[@jairosnyirenda]

This is amazing. Thank you. But now, how can you pass the GEOJson dynamically to the map? Let's say an API call that returns GEOJson data that needs to be rendered on the map?

[@PhanxDEV95]

Thank you for your kind words :) To answer your question: In the main.js file of the OpenLayers web app, you could add another function to the window object, just like you saw it in the video with the "zoomToGeoJSON", maybe you want to call it something like "addGeoJsonFeatuers". This function could have a parameter, which is the GeoJSON result from the API call and it will add the features to the GeoJson source (variable name "geoJsonSource" in the example) via "addFeatures". You can then call this function from react native just like the zoomToGeoJSON function in the example. I hope this is a help for you

[@jairosnyirenda]

@@PhanxDEV95 Thank you, let me try this and get I will get back to you once done!!!

[@Ashur-lab]

Hello sir. Huh do you have any tutorial on how to start using OpenLayers on react js? I love your video !!

[@PhanxDEV95]

Thank you for your comment:) Maybe this video can help you: How to get started with OpenLayers in React JS kzbin.info/www/bejne/pZzGn5-EbpaXeZI

[@AnupamSharma-sh6vo]

Hey, working on a Cab Facility app , can you advice me how to use this map somewhat like Uber, where we have markers , geocoding , reverse geocoding ?

[@PhanxDEV95]

Hello. Thank you for your comment :) (And sorry for the late response) Look at this OL example: openlayers.org/en/latest/examples/modify-icon.html. You should be able to do something similar to implement markers. Always keep in mind, that you put the JS code that interacts with OpenLayers has to be put in the Wep application, if you need some kind of interaction with the React Native app itself, you need to define global functions on the window object of the web app. Regarding geocoding: I do not really have experience with that to be honest, but I know that there are pretty cool services for that from Google. I would try to integrate them in the wep app part of the project. I hope this helps a little :)

[@AnupamSharma-sh6vo]

@@PhanxDEV95 Thanks a lot mate.

[@jenialherdianto292]

you're jenius, man

[@luzianaassuncao4587]

muito obrigada!!!😍😍

[@PhanxDEV95]

You‘re welcome 😅

[@andriikostenko2379]

nice, thanks

Muito bom.

[@labibhassan6679]