React Native for WEB implementation of react-native-maps using Leaflet
npm install @alamoweb/react-native-web-mapview> React Native for Web implementation of react-native-maps (using Leaflet)
Based on react-native-web-maps but using Leaflet (default).
``sh`
yarn add @alamoweb/react-native-web-mapview
Add the Leaflet CSS:
- In case you're using Expo, add it to your web/index.html
How to expose expo's index.html?
`html`
...
...
lib for iOS/Android and wanting to support Web without needing to add a condition to switch between the libs, add this alias to your webpack.config.js:`js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
config.resolve.alias['react-native-maps'] = '@alamoweb/react-native-web-mapview';
return config;
};
`
Usage
`ts
import MapView, { Marker } from '@alamoweb/react-native-web-mapview'; // or 'react-native-maps'
`See the original documentation.
The supported components are:
-
MapView
- MarkerMapView:The officially supported props are:
-
region
- initialRegion
- maxZoomLevel
- minZoomLevel
The officially supported events are:
-
onMapReady
- onPanDrag
- onRegionChange
- onRegionChangeComplete
The officially supported methods are:
-
getMapBoundaries
- getCamera
- setCamera
- animateCamera
Additional methods:
-
getMap: returns the Leaflet map instance
Marker:The officially supported props are:
-
icon
- image
- title
- description
- coordinate
- identifier
- opacity
The officially supported events are:
-
onPress`See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT