# React Native TPL Maps 

**React Native TPL Maps** Android, iOS pacakge for React Native. It will help you to add maps in your application. The API automatically handles access to our TPL Maps servers, data downloading, map display, and response to map gestures. You can do add markers, shapes, POIs show/hide point of interests, custom map styles and much more.



### Maintainers

**TPL Maps** 
- Daniyal Ahmed Khan - Manager & Team Lead (Android Development) - daniyal.khan@tplmaps.com
- Abdul Basit - Head of Analytics & Data Services – Information Technology (IT) - Abdul.Basit@tplmaps.com


### Disclaimer

Maintaining Mapping SDK is very complex, because it is often used for many different usecases (rendering tiles, icons, pois, and much more).  
**we will prioritize updating and feature enhancement in future.**  

### Platform Compatibility  

This project is compatible with **Android** , **iOS** 
This project is compatible with Android Minimum SDK 21.

### Getting Started

Please follow the below steps:

1- **npm install react-native-tpl-maps-view**  
2- **Use the latest version of Package v0.0.8 in Package.json file**  
3- **Add your TPL Maps Key in Android Manifest File like below**  
```tsx
 <meta-data android:name="com.tplmaps.android.sdk.API_KEY"
            android:value="YOUR_API_KEY" />
```
4- **Add tplservices.config file in iOS project (Download from api.tplmaps.com follow iOS guide.)**  

5- **Add MyPacakge() in your Android MainApplication Class ArrayList inside getPackages method**  

### Usage

Import the `MyViewManager2` component from `react-native-tpl-maps-view` and use it like so to load Base Map:

```tsx
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MyViewManager2 } from 'react-native-tpl-maps-view';
import { Platform } from 'react-native';

const createFragment = (viewId: any) =>
  UIManager.dispatchViewManagerCommand(
    viewId,
    "1", [viewId],
  );

const App = () => {
  const ref = useRef(null);

 if (Platform.OS === 'android') {
  useEffect(() => {
    const viewId = findNodeHandle(ref.current);
    createFragment(viewId);
  }, []);
}


  if (Platform.OS === 'ios') {
    return (


      <MyViewManager2 style={{ flex: 1 }} />

    );
  } else {
    return (
  
      <MyViewManager2 ref={ref} style={{ flex: 1 }} />
    
    );
  }



};


export default App;
```


**Add Marker on Map with LatLng**


```tsx
import {AddMarker} from 'react-native-tpl-maps-view'


AddMarker("67.125973;24.820649")
```


**Camera Zoom on Map with LatLng and Zoom Level**


```tsx
import {AddMarker} from 'react-native-tpl-maps-view'


SetCameraAnimation("67.125973;24.820649" , "15")
```

**Add Custom Marker**


```tsx
import {AddCustomMarker} from 'react-native-tpl-maps-view'


AddCustomMarker("67.123601;24.820102")
```


**Register Callback to recevice LatLng on Marker Click and Camera Change Listner**


```tsx
import {AddMarker} from 'react-native-tpl-maps-view'


CameraCallback()

**You will receive LatLng updates within TplMapsController.tsx**
export function CameraCallback() {
  MyModule.CameraCallback('Hello from React Native!')
    .then((result: any) => {
      console.warn(result)
      console.log(result); // Log the promise result
    })
    .catch((error: any) => {
      console.warn("Not working....")
      console.error(error); // Handle any errors
    });
}
```


### Common issues

- If you're getting `Invariant Violation: Native component for "RNCWebView does not exist"` it likely means you forgot to run `react-native link` or there was some error with the linking process
- If you encounter a build error during the task `:app:mergeDexRelease`, you need to enable multidex support in `android/app/build.gradle`

#### Contributing

Please report your issues and bugs on daniyal.khan@tplmaps.com

### License

MIT
