41
A LeafletView component using WebView and Leaflet map for React Native applicati...
source link: https://reactnativeexample.com/a-leafletview-component-using-webview-and-leaflet-map-for-react-native-applications/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react-native-leaflet
A LeafletView component using WebView and Leaflet map for React Native applications
Notes: This project is replacement for https://github.com/reggie3/react-native-webview-leaflet, which no longer maintain by author and work only with expo.
Installation
Install using npm or yarn like this:
npm install --save react-native-leaflet-view
yarn add react-native-leaflet-view
Usage
import { LatLng, LeafletView } from 'react-native-leaflet-view';
<LeafletView
// The rest of your props, see the list below
/>
Props
property required type purpose loadingIndicator optional React.ReactElement custom component displayed while the map is loading onError optional function Will receive an error event onLoadEnd optional function Called when map stops loading onLoadStart optional function Called when the map starts to load onMessageReceived required function This function receives messages in the form of a WebviewLeafletMessage object from the map mapLayers optional MapLayer array An array of map layers mapMarkers optional MapMarker array An array of map markers mapShapes optional MapShape[] An array of map shapes mapCenterPosition optional {lat: [Lat], lng: [Lng]} object The center position of the map. This coordinate will not be accurate if the map has been moved manually. However, calling the map's setMapCenterPosition function will cause the map to revert to this location ownPositionMarker optional Marker A special marker that has an ID of OWN_POSTION_MARKER_ID zoom optional number Desired zoom value of the map doDebug optional boolean A flag for debug message loggingContributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK