import ol from openlayers in react-native

Question

Hellow, I'm using react-native to create a User Interface for my application. I'm using Genymotion for testing my code on virtual Android. I wanna use Openlayers javascript library in my web map application. I followed these steps:

1. npm install openlayers
   
2. I added import ol from 'openlayers'; to "index.android.js" then when i test my code with Genymotion I get an error. I used import {ol} from 'openlayers'; insted of import ol from 'openlayers'; but it doesn't worked.

Clannish

what does terminal says ? – Lambkin

I'm using windows 8.1. command prompt says : at _transform.then.catch.error (C:\Users\my_user\some_directory\PropertyFinder\node_modules\metro-bundler\build\JSTransformer\index.js:138:28) – Clannish

is it possible to add openlayers library to react-native? – Clannish

Answer 1

EDIT: ANSWER NOT FOR REACT-NATIVE (my bad)

You may have already found this, or perhaps it is the package you are using, but if you are attempting to use the standard web version of open layers in the react native project, you might have issues doing that. I did a search and found this package which appears to be open layers specifically designed for react native

NOTE This package only supports open layers 3, so if you are using open layers 4, it will fail.

Here's the steps to get it working

npm install react-openlayers --save-dev

Then

import {
  interaction, layer, custom, control, //name spaces
  Interactions, Overlays, Controls,     //group
  Map, Layers, Overlay, Util    //objects
} from "react-openlayers";

A working example can be found here:

https://github.com/allenhwkim/react-openlayers

Hope it helps!

Countrified

Hellow and thanks for your answer. Your answer is for react.js but i have a problem with react native. – Clannish

as penance for my bad answer, i did a bit more research, and I found this thread for the react-native-maps plugin. github.com/airbnb/react-native-maps/issues/1098 it appears that it depends on google maps right now, but there are people working to remove that dependency, I tried looking for alternative options but didn't come up with anything satisfactory :/ sorry – Countrified

No problem and thanks again. I've created a I a routing map application on the web with Openlayers3 and wanna use this module(Openlayers on react native) to create a routing map application for Android and IOS with react native. I'm using Geoserver REST API on the back-end. Do you have a good alternative? – Clannish

I'm not sure if this is what you are looking for, but it here's another SO article with a creative solution - https://mcmap.net/q/586679/-react-native-and-wms it seems he is using the open layers module in a react native webview. So theoretically it should do what you want. You'll get open layers in your react app, but you'll have to live with it being inside a webview. hopefully this helps – Countrified