React Native Webview with openlayers

Question

I have seen this info: https://stackshare.io/stackups/leaflet-vs-mapbox-vs-openlayers

I'm developing at the same time a web application with react using OpenLayers. And I have to make the same app on mobile using react native but I don't know how to make it works.

Here is my code to web app using React + Openlayers:

import React, { Component } from 'react'; import './App.css';  // openlayers import View from 'ol/view'; import Projection from 'ol/proj/projection'; import Map from 'ol/map'; import Zoom from 'ol/control/zoom'; import Tile from 'ol/layer/tile'; import OSM from 'ol/source/osm';  class App extends Component {     constructor(props) {      super(props);       this.view = new View({         center: [-41925.302985762304, 4789880.268977703],         zoom: 12,         minZoom: 2,         maxZoom: 28,            projection: new Projection({              code: 'EPSG:3857',              units: 'm'            })      });    }     componentDidMount() {      this.map =  new Map({      view: this.view,      controls: [ new Zoom() ],         layers: [new Tile({ source: new OSM() })],         target: 'map'      });    }     render() {      console.log('-> render App')      return (        <div id="map" class="map"></div>      );    } }  export default App; 

And here is my problem, I don't know how to make it works in react native.

How can you add this.map ( javascript Map object ) inside WebView?

I have seen this example in other question React Native and WMS but I would like to work with React because I need to modify, add layers dynamically, etc.

import React, { Component } from 'react'; import { StyleSheet, View, WebView } from 'react-native';  // openlayers import View from 'ol/view'; import Projection from 'ol/proj/projection'; import Map from 'ol/map'; import Zoom from 'ol/control/zoom'; import Tile from 'ol/layer/tile'; import OSM from 'ol/source/osm';  type Props = {}; export default class App extends Component<Props> {  constructor(props) {    super(props);    this.view = new View({       center: [-41925.302985762304, 4789880.268977703],       zoom: 12,       minZoom: 2,       maxZoom: 28,       projection: new Projection({          code: 'EPSG:3857',          units: 'm'       })    }); }  componentDidMount() {    this.map =  new Map({      view: this.view,      controls: [ new Zoom() ],      layers: [new Tile({ name:'tile', source: new OSM() })],      target: 'map'    }); }  render() {    var html = '<div id="map" class="map"></div>';    return (      <View style={styles.container}>         <WebView             ref={webview => { this.webview = webview; }}            source={{html}}            onMessage={this.onMessage}/>         />      </View>    );   } }  const styles = StyleSheet.create({    container: {      flex: 1,      justifyContent: 'center',      alignItems: 'center',      backgroundColor: '#F5FCFF',    } }); 

Answer 1

Well, I've been working with ReactJS and Leaflet and I'm quite satisfied. I can integrate leaflet pluggins with React easily, do my own pluggin, add styles, and so on. But if you need to add some kind of map rotation, leaflet will not work, you'll have to do it.

About the ReactNative issue: you can see this link, its a 'Webview based Leaflet Component for React Native'.

You can replace the WebView component by this component:

<WebViewLeaflet   ref={(component) => (this.webViewLeaflet = component)}   onLoad={this.onLoad}   eventReceiver={this} // the component that will receive map events /> 

And add a function named onLoad to load the layers:

onLoad = (event) => {   // log a message showing the map has been loaded   console.log('onLoad received : ', event);    //example of array of layers   const mapLayers = [     {       name: 'streets',  // the name of the layer, this will be seen in the layer selection control       checked: 'true',  // if the layer is selected in the layer selection control       type: 'TileLayer',  // the type of layer as shown at https://react-leaflet.js.org/docs/en/components.html#raster-layers       baseLayer: true,       // url of tiles       url: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${mapboxToken}`,       // attribution string to be shown for this layer       attribution:         '&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors'     }   ]    // set state   this.setState(     {       ...this.state,       mapState: { ...this.state.mapState, mapLoaded: true }     },     () => {       // send an array of map layer information to the map       this.webViewLeaflet.sendMessage({         mapLayers       });     }   ); } 

If you need to add some Google map tiles or map data from Open Street Maps it will not work. If this is your case, you can try that link, (I never used it, is just a sugestion).