https://github.com/neukolabs/react-native-maplibre-js
A Maplibre JS wrapper for react-native
https://github.com/neukolabs/react-native-maplibre-js
aws-location-service javascript location-services maplibre-gl-js mapping react-native
Last synced: 8 months ago
JSON representation
A Maplibre JS wrapper for react-native
- Host: GitHub
- URL: https://github.com/neukolabs/react-native-maplibre-js
- Owner: neukolabs
- License: mit
- Created: 2024-08-27T04:23:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-04T07:43:09.000Z (about 1 year ago)
- Last Synced: 2025-01-31T03:14:26.977Z (8 months ago)
- Topics: aws-location-service, javascript, location-services, maplibre-gl-js, mapping, react-native
- Language: JavaScript
- Homepage:
- Size: 1.73 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React-Native Maplibre JS
A Maplibre JS wrapper for react-native. The package uses Javascript APIs to help developer interact with the map that being rendered by react-native-webview.
[](http://makeapullrequest.com)
## Table of Content
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)
- Guides
- - [Map API Documentation](./docs/Map.md)
- - [Marker API Documentation](./docs/Marker.md)
- [Motivation](#motivation)
- [Contribution](#contributing)
## Installation
If you are npm-er
```sh
npm install @neukolabs/react-native-maplibre-js react-native-webview
```
For those yarn-er
```sh
yarn add @neukolabs/react-native-maplibre-js react-native-webview
```
## Link Native Dependencies
### iOS & macOS
If you are using Cocoapods, run below command:
```sh
npx pod-install
```
I have no idea for else cases other than Cocoapods.
### Android
There is no more extra step after installation.
### React-native webview
This library uses [react-native-webview](https://github.com/react-native-webview/react-native-webview). The linkage is basically to link **react-native-webview**.
For additional information for the package linkage, please refer to the package instruction.
## Minimal usage
### Step 1: Call MaplibreMap in your component
```js
import React, { useRef } from 'react';
import { StyleSheet } from 'react-native';
import { MaplibreMap } from '@neukolabs/react-native-maplibre-js';
export default function MapView() {
// hooks
const mapRef = useRef();
const onMaploaded = async (e) => {
console.log('map is loaded');
// let's go to the ocean
await mapRef.current.setCenter([-74, 38]);
};
return (
onMaploaded()}
/>
);
}
const styles = StyleSheet.create({
map: {
flex: 1,
maxHeight: '100%',
width: '100%',
},
});
```
## Examples
### 1. Get current map center coordinates after drag
Watch for props **mapEventListeners** to listen for event.
```js
import { useRef } from 'react';
import { MaplibreMap } from '@neukolabs/react-native-maplibre-js';
export default function MapView() {
// hooks
const mapRef = useRef();
const onMapEvent = async (eventName) => {
if (eventName === 'dragend') {
const center = await mapRef.current.getCenter();
console.log(center);
// output {"lat": some number, "lng": some number}
}
};
return (
);
}
```
### 2 (a). AWS Location Service using API Key
```js
import { MaplibreMap } from '@neukolabs/react-native-maplibre-js';
export default function MapView() {
return (
);
}
```
### 2 (b). AWS Location Service using AWS Tempory Credentials
```js
import { MaplibreMap } from '@neukolabs/react-native-maplibre-js';
export default function MapView() {
return (
);
}
```
### 3.Map with marker
Make sure the Marker is inside MaplibreMap component.
```js
import { useRef } from 'react';
import { MaplibreMap, Marker } from '@neukolabs/react-native-maplibre-js';
export default function MapView() {
const markerRef = useRef();
return (
{
if (e === 'dragend') {
// get current position adter drag the marker
const pos = await markerRef.current.getLngLat();
console.log(pos);
}
}}
/>
);
}
```
## Motivation
Maplibre is an awesome package for most of the platforms especially for web application. The platform has a comprehensive APIs ([Maplibre Map document](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#example)) that enables awesome application to be built.
The motivation to build this package:
- to be as closest as possible as the ([web version's API](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#example)).
- to support other map providers natively.
- integrating the Map with **AWS Location Service** in React-Native can be made as *natively in Javascript environment*.
The package is basically a bridge between React-Native component to the Webview loaded with Maplibre.
## Contributing
Contribution are most welcome. See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)