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

• Bilal Sipra - Head of Information Technology (IT) - [email protected]
• Daniyal Ahmed Khan - Manager & Team Lead (Android Development) - [email protected]
• Muhammad Anum - Manager & Team Lead (iOS Development) - [email protected]

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 v1.8.2 in Package.json file
3- Add your TPL Maps Key in Android Manifest File like below

 <meta-data android:name="com.tplmaps.android.sdk.API_KEY"
            android:value="YOUR_API_KEY" />

4- Make Sure to Add in Gradle in AllProject under buildscript tag

 buildscript {
    ext.safeExtGet = {prop ->
        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : project.properties['ReactNativeWebView_' + prop]
    }
    repositories {
        google()
        gradlePluginPortal()
    }
    dependencies {
       // classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion')}")
        classpath("com.android.tools.build:gradle:7.0.4")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
    allprojects {

        repositories {
            jcenter()
            google()
            maven { url 'https://jitpack.io'}
            maven { url "http://api.tplmaps.com:8081/artifactory/example-repo-local/"
                allowInsecureProtocol = true}

        }
    }
}

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 MyViewManager component from react-native-tpl-maps-view and use it like so to load Base Map:

import React, { useEffect, useRef } from 'react';
import {
  PixelRatio,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  UIManager,
  View,
  findNodeHandle,
} from 'react-native';

import MyViewManager from 'react-native-tpl-maps-view';
import { AddMarker, CameraCallback, SetCameraAnimation, SetPolyLine, AddCustomMarker } from 'react-native-tpl-maps-view'
import { NativeModules , NativeEventEmitter } from "react-native"
import { DeviceEventEmitter } from 'react-native';

const createFragment = (viewId: any) =>
  UIManager.dispatchViewManagerCommand(
    viewId,
    // we are calling the 'create' command
    "1", [viewId],
  );
  
const App = () => {

  const ref = useRef(null);
  if (Platform.OS === 'android') {

    useEffect(() => {
      const viewId = findNodeHandle(ref.current);
      createFragment(viewId);
      const YourModuleEvents = new NativeEventEmitter(NativeModules.MyModule);
      
    YourModuleEvents.addListener('onReady', (string) => {

// You will recevice Lat;Lng here in String from which call the URL for Address on the basis of LatLng to show to the user on Search Bar

      // => /search/point  Get results around provided point. on api.tplmaps.com under rest api.
        if(string === "MapReady"){
          // Perform any task on First Time Map Ready
              _SetCameraAnimation()
        }else{
          console.log('Received string from Android:', string);
        }
        
      });

    }, []);
  }else{
  
     useEffect(() => {
    
  const YourModuleEvents = new NativeEventEmitter(NativeModules.RNEventEmitter);
  const eventListener = YourModuleEvents.addListener('onReady', (string) => {
  
      // You will recevice Lat;Lng here in String from which call the URL for Address on the basis of LatLng to show to the user on Search Bar
       // => /search/point   Get results around provided point. on api.tplmaps.com under rest api.
      console.log('Received Lat Lng string from iOS on Map Move:', string);
    });
    }, []);

  }

  return (
  
    <View style={{ flex: 1 }}>
    
    //Android
    <MyViewManager
      ref={ref}
      customWidth={PixelRatio.getPixelSizeForLayoutSize(windowWidth)}
      customHeight={PixelRatio.getPixelSizeForLayoutSize(windowHeight / 1.2)}
      />
        
    //iOS    
      <MyViewManager style={{ flex: 1 }} />  
        
      <View style={{alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}}>
        <View style={{
          flexDirection: 'column',
          alignItems: 'center',
        }}>
          <Text style={{fontSize: 20 , color: '#000' , margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}} onPress={_SetCameraAnimation}>Zoom on Loc</Text>

          <Text style={{fontSize: 20 , color: '#ed0707', margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}} onPress={_AddMarker}>Add Marker on Loc</Text>

          <Text style={{fontSize: 20 , color: '#ed0707', margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}} onPress={_AddMarkerRider}>Add Rider Marker on Loc</Text>

          <Text style={{fontSize: 20 , color: '#ed0707', margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}} onPress={_AddMarkerOther}>Add Customer Marker on Loc</Text>

          {/*<Text style={{fontSize: 20 , color: '#34ff30' , margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}}onPress={_CameraCallback}>Get Lat Long on Camera Move</Text>*/}

          <Text style={{fontSize: 20 , color: '#211091' , margin: 10 , alignItems: 'flex-start' , alignSelf: 'flex-start', justifyContent: 'flex-start' , alignContent: 'flex-start'}}onPress={_SetPolyLine}>Add Polyline</Text>
        </View>
      </View>
    </View>
  );
};

const _SetCameraAnimation = () => {

  // Use the same format for passing arguments.
  SetCameraAnimation("67.125973;24.820649", "15")
 
}

const _AddMarker = () => {

  // Use the same format for passing arguments.
  AddMarker("67.125973;24.820649")
 
  
}

const _AddMarkerRider = () => {

   //Lng;Lat;iconName;widht;height;Bearing;Title;Description
  AddCustomMarker("74.2756865690001;31.4616382070001;rider;60;60;90;title;description")

  var base64String: String = "";
  //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64("74.2756865690001;31.4616382070001;90;title;description" , base64String)

  }

const _AddMarkerOther = () => {

   // Use the same format for passing arguments.
  //Lng;Lat;iconName;widht;height;Bearing;Title;Description
    AddCustomMarker("67.083189;24.866864;other;10;60;60;branch1;Test Decription")
  
}

const _SetPolyLine = () => {

   SetCameraAnimation("74.2756865690001;31.4616382070001", "12")

  // Use the same format for passing arguments.

  //Multiple Destination LatLng 
  const destinationTasks = ['31.48455975378302;74.29685026783983' , '31.467061391273962;74.30751354085537'];

  // Passing Current Location LatLng , Desitnation LatLng and ApiKey
  SetPolyLine("31.4616382070001;74.2756865690001", destinationTasks, "#FF5733" , "1" , "")
 }

export default App;

Using in Navigation Stacks to reload map And Custom Height Adjustment

import { useWindowDimensions } from 'react-native';



const createFragment = (viewId: any) =>
  UIManager.dispatchViewManagerCommand(
    viewId,
    // we are calling the 'create' command
    "1", [viewId]
  );


interface HomeScreenProps {
  navigation: any;
}

const Home: React.FC<HomeScreenProps> = ({ navigation }) => {

  var ref = useRef(null);
  if (Platform.OS === 'android') {

      const YourModuleEvents = new NativeEventEmitter(NativeModules.MyModule);

      YourModuleEvents.addListener('onReady', (string) => {

        if (string === "MapReady") {
          //_SetCameraAnimation()
        } else {
          console.log('Received string from Android:', string);
        }

      });
  } else {

    useEffect(() => {
     

  const YourModuleEvents = new NativeEventEmitter(NativeModules.CustomEventEmitter);

    
    const eventListener = YourModuleEvents.addListener('onReadyyy', (string) => {
      

      // You will recevice Lat;Lng here in String from which call the URL for Address on the basis of LatLng to show to the user on Search Bar

       // => /search/point   Get results around provided point. on api.tplmaps.com under rest api.
      console.log('Received Lat Lng string from iOS on Map Move:', string);
    });

    
    }, []);

  }

  useFocusEffect(
    React.useCallback(() => {

      const viewId = findNodeHandle(ref.current);
      createFragment(viewId);

      return () => {

      

      };
    }, [])
  );

  windowWidth = useWindowDimensions().width;
  windowHeight = useWindowDimensions().height;


  const handleNavigate = () => {
    navigation.navigate('Details');
  };



  return (

    
    // To Adjust Custom height according to your view.
  <MyViewManager
      ref={ref}
      customWidth={PixelRatio.getPixelSizeForLayoutSize(windowWidth)}
      customHeight={PixelRatio.getPixelSizeForLayoutSize(windowHeight / 1.2)}
    />

     );

}

Add Marker on Map with LatLng

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


AddMarker("67.125973;24.820649")

Camera Zoom on Map with LatLng and Zoom Level

import {SetCameraAnimation} from 'react-native-tpl-maps-view'


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

Add Custom Marker

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


 AddCustomMarker("67.083189;24.866864;branch;60;60;branch1;Test Decription")
 //Lng, Lat, icon name, width, height, info window title, info windoe description

  AddCustomMarker("67.083189;24.866864;rider;60;60;branch1;Test Decription")
 //Lng, Lat, icon name, width, height, info window title, info windoe description

  AddCustomMarker("67.083189;24.866864;branch;60;60;branch1;Test Decription")
 //Lng, Lat, icon name, width, height, info window title, info windoe description


### New Methods

var base64String: String = "";
//Lng;Lat;Bearing;Title;Description, Base64 String
AddCustomMarkerWithBase64("74.2756865690001;31.4616382070001;90;title;description" , base64String)

RemoveAllMarkers()
RemoveAllPolyLines()

Contributing

Please report your issues and bugs on [email protected]

License

MIT