Expo-web-maps NPM

expo-web-maps

react-native-maps extension with compatibility for expo web.

Installation

Expo

npx expo install expo-web-maps

Add the following to your app config:

...
web: {
  ...
  config: {
    ...
    googleMapsApiKey: YOUR_API_KEY,
  },
},

Then follow the additional iOS and Android installation instructions for react-native-maps: https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

Bare React Native

Use react-native-maps

Using the example app

Clone the project

git clone git@github.com:jmdoan1/expo-web-maps.git

cd into the project

cd expo-web-maps

install dependencies

npm i
cd example
npm i
cd ios
pod install

create a .env file in the example folder and copy over the placeholders from .envexample
Add your own google maps js api key: https://developers.google.com/maps/documentation/javascript/get-api-key
Add your own map id: https://developers.google.com/maps/documentation/javascript/advanced-markers/start#create_a_map_id
From the example folder, run the project on web

cd example #if necessary
npx expo start --web

Play around in the example/App.tsx file
- All props are currently utilized in the example except for style

Supported Components

MapView

Props

Property	Default	iOS	Android	Web	Description
`cacheEnabled`	`false`	Apple Maps only	Supported	Not supported	If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
`camera`		Supported	Supported	Supported	The camera view the map should display. Use the camera system, instead of the region system, if you need control over the pitch or heading.
`compassOffset`		Apple Maps only	Not supported	Not supported	If set, changes the position of the compass.
`customMapStyle`		Google Maps only	Supported	Supported (Do not use if using `Marker` components)	Adds custom styling to the map component. See README for more information.
`followsUserLocation`	`false`	Apple Maps only	Not supported	Not supported	If `true` the map will focus on the user's location. This only works if `showsUserLocation` is true and the user has shared their location.
`initialCamera`		Supported	Supported	Supported	The initial camera view the map should use. Use this prop instead of `camera` only if you don't want to control the camera of the map besides the initial view.
`initialRegion`		Supported	Supported	Supported	The initial region to be displayed by the map. Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.
`kmlSrc`		Google Maps only	Supported	Supported	The URL for KML file.
`legalLabelInsets`		Apple Maps only	Not supported	Not supported	If set, changes the position of the "Legal" label link in Apple maps.
`liteMode`		Not supported	Supported	Not supported	Enables lite mode on Android.
`googleMapId`		Google Maps only	Supported	Supported (Required if using Markers)	Google cloud mapId to enable cloud styling and more.
`googleRenderer`	`LATEST`	Not supported	Supported	Not supported. Use `renderingType`	Google maps renderer.
`loadingBackgroundColor`	`#FFFFFF`	Apple Maps only	Supported	Supported	Sets loading background color.
`loadingEnabled`	`false`	Apple Maps only	Supported	Not supported	If `true` a loading indicator will show while the map is loading.
`loadingIndicatorColor`	`#606060`	Apple Maps only	Supported	Not supported	Sets loading indicator color.
`mapPadding`		Supported	Supported	Not supported -- TODO	Adds custom padding to each side of the map. Useful when map elements/markers are obscured.
`mapType`	`standard`	hybrid, mutedStandard, satellite, standard, terrain, hybridFlyover, satelliteFlyover	hybrid, none, satellite, standard, terrain	Not supported. Use `mapTypeWeb`	The map type to be displayed.
`mapTypeWeb`		Not supported	Not supported	hybrid, roadmap, satellite, terrain	The map type to be displayed.
`maxDelta`		Apple Maps only	Not supported	Not supported	TODO: Add documentation
`maxZoomLevel`	`20`	Supported	Supported	Supported	Maximum zoom value for the map, must be between 0 and 20.
`minDelta`		Apple Maps only	Not supported	Not supported	TODO: Add documentation
`minZoomLevel`	`0`	Supported	Supported	Supported	Minimum zoom value for the map, must be between 0 and 20.
`moveOnMarkerPress`	`true`	Not supported	Supported	TODO	If `false` the map won't move to the marker when pressed.
`onCalloutPress`		Apple Maps only	Supported	TODO	Callback that is called when a callout is tapped by the user.
`onDoublePress`		Apple Maps only	Supported	Supported	Callback that is called when user double taps on the map.
`onIndoorBuildingFocused`		Google Maps only	Supported	TODO	Callback that is called when an indoor building is focused/unfocused.
`onIndoorLevelActivated`		Google Maps only	Supported	TODO	Callback that is called when a level on indoor building is activated.
`onKmlReady`		Google Maps only	Supported	Partially supported (returns empty event)	Callback that is called once the kml is fully loaded.
`onLongPress`		Supported	Supported	TODO	Callback that is called when user makes a "long press" somewhere on the map.
`onMapLoaded`		Google Maps only	Supported	Partially supported (returns empty event)	Callback that is called when the map has finished rendering all tiles.
`onMapReady`		Supported	Supported	Not supported	Callback that is called once the map is ready.
`onMarkerDeselect`		Supported	Supported	TODO	Callback that is called when a marker on the map becomes deselected.
`onMarkerDrag`		Apple Maps only	Supported	TODO	Callback called continuously as a marker is dragged.
`onMarkerDragEnd`		Apple Maps only	Supported	TODO	Callback that is called when a drag on a marker finishes.
`onMarkerDragStart`		Apple Maps only	Supported	TODO	Callback that is called when the user initiates a drag on a marker (if it is draggable).
`onMarkerPress`		Supported	Supported	TODO	Callback that is called when a marker on the map is tapped by the user.
`onMarkerSelect`		Supported	Supported	TODO	Callback that is called when a marker on the map becomes selected.
`onPanDrag`		Supported	Supported	TODO	Callback that is called when user presses and drags the map.
`onPoiClick`		Google Maps only	Supported	TODO	Callback that is called when user click on a POI.
`onPress`		Supported	Supported	Supported	Callback that is called when user taps on the map.
`onRegionChange`		Supported	Supported	TODO	Callback that is called continuously when the region changes.
`onRegionChangeComplete`		Supported	Supported	TODO	Callback that is called once when the region changes.
`onUserLocationChange`		Supported	Supported	TODO	Callback that is called when the underlying map figures our users current location.
`paddingAdjustmentBehavior`		Google Maps only	Not supported	Not supported	Indicates how/when to affect padding with safe area insets.
`pitchEnabled`	`true`	Google Maps only	Supported	TODO	If `false` the user won't be able to adjust the camera’s pitch angle.
`provider`		Supported	Supported	Supported	The map framework to use.
`region`		Supported	Supported	Supported	The region to be displayed by the map.
`renderingType`	`RASTER`	Not supported	Not supported	Supported	Google maps rendering type.
`rotateEnabled`	`true`	Google Maps only	Supported	TODO	If `false` the user won't be able to adjust the camera’s pitch angle.
`scrollDuringRotateOrZoomEnabled`	`true`	Google Maps only	Supported	TODO	If `false` the map will stay centered while rotating or zooming.
`scrollEnabled`	`true`	Supported	Supported	TODO	If `false` the user won't be able to change the map region being displayed.
`showsBuildings`	`true`	Not supported	Supported	TODO	A Boolean indicating whether the map displays extruded building information.
`showsCompass`	`true`	Supported	Supported	Not supported	If `false` compass won't be displayed on the map.
`showsIndoorLevelPicker`	`false`	Google Maps only	Supported	TODO	A Boolean indicating whether indoor level picker should be enabled.
`showsIndoors`	`true`	Google Maps only	Supported	TODO	A Boolean indicating whether indoor maps should be enabled.
`showsMyLocationButton`	`true`	Google Maps only	Supported	TODO	If `false` hide the button to move map to the current user's location.
`showsPointsOfInterest`	`true`	Maybe Apple Maps?	Not supported	TODO	If `false` points of interest won't be displayed on the map.
`showsScale`	`true`	Apple Maps only	Not supported	Not supported	A Boolean indicating whether the map shows scale information.
`showsTraffic`	`false`	Supported	Not supported?	Supported	A Boolean value indicating whether the map displays traffic information.
`showsUserLocation`	`false`	Supported	Supported	TODO	If `true` the users location will be displayed on the map. This will cause iOS to ask for location permissions.
`tintColor`	`System Blue`	Apple Maps only	Not supported	Not supported	Sets the tint color of the map. (Changes the color of the position indicator)
`toolbarEnabled`	`true`	Not supported	Supported	TODO?	If `false` will hide 'Navigate' and 'Open in Maps' buttons on marker press.
`userInterfaceStyle`	`System setting`	Apple Maps only (iOS >= 13.0)	Not supported	Not supported	Sets the map to the style selected.
`userLocationAnnotationTitle`	`My Location`	Apple Maps only	Not supported	Not supported	The title of the annotation for current user location.
`userLocationCalloutEnabled`	`false`	Apple Maps only	Not supported	Not supported	If `true` clicking user location will show the default callout for userLocation annotation.
`userLocationFastestInterval`	`5000`	Not supported	Supported	TODO?	Fastest interval the application will actively acquire locations.
`userLocationPriority`	`high`	Not supported	Supported	TODO?	Set power priority of user location tracking.
`userLocationUpdateInterval`	`5000`	Not supported	Supported	TODO?	Interval of user location updates in milliseconds.
`zoomControlEnabled`	`true`	Not supported	Supported	Supported	If `false` the zoom control at the bottom right of the map won't be visible.
`zoomEnabled`	`true`	Supported	Supported	TODO	If `false` the user won't be able to pinch/zoom the map.
`zoomTapEnabled`	`true`	Google Maps only	Not supported	TODO?	If `false` the user won't be able to double tap to zoom the map.
`cameraZoomRange`		13.0+	Not supported	Not supported	Map camera distance limits. `minCenterCoordinateDistance` for minimum distance, `maxCenterCoordinateDistance` for maximum.

Marker

Props

Integration Pending

Callout

Props

Integration Pending

TODO

Additional MapViewProps integration
Marker props integration
Callout props integration
Add other components from react-native-web
- Polygon
- Polyline
- Circle
- Overlay
- Heatmap
- Geojson

All documentation below this line was autogenerated and serves only as a placeholder

API documentation

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npm install expo-web-maps

Configure for iOS

Run npx pod-install after installing the npm package.

Configure for Android

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.

react-native expo expo-web-maps ExpoWebMaps

@types/react-native-maps react-dom react-native-maps

0.1.1

11 days ago

0.1.0

24 days ago