Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use leaflet.js with react-native

I am having a difficult time setting up Leaflet.js with react-native. The documentation tells me to add the following script in my html...

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

But I am not sure how I do this using react. Right now my main page is being rendered as follows...

AppRegistry.registerComponent('beacon', () => Home);

And my Home is simply something like...

export default Home = () => {
    return (
        <Provider store={store}>
            <MainMap />
        </Provider>
    );
}

Where/How do I add this script tag to include Leaflet.js? Is it even possible? Is there perhaps another solution?

I haven't seen any examples of react-native and Leaflet.js, if there is one, on github or what not, I'd be happy to see it.

like image 949
buydadip Avatar asked Nov 02 '16 03:11

buydadip


People also ask

Can I use leaflet with react native?

There is a project react-leaflet through which you can use leaflet. js with react. But currently there is no support for using leaflet. js in react-native.

How do you add a leaflet to a react js map?

We must import Map from react-leaflet (along with some other packages that we'll utilize later), and we'll return it from our App component: import React, {useState} from "react"; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import './App.


1 Answers

There is a project react-leaflet through which you can use leaflet.js with react.

But currently there is no support for using leaflet.js in react-native. See this issue for more info.

like image 142
Jickson Avatar answered Sep 22 '22 01:09

Jickson