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) - bilal.sipra@tplmaps.com
Daniyal Ahmed Khan - Manager & Team Lead (Mobile Development) - daniyal.khan@tplmaps.com
Zaeem Ehsanullah - Assistant Manager (Mobile Application Development) - zaeem.ehsanullah@tplmaps.com
Muhammad Anum - Manager & Team Lead (iOS Development) - muhammad.anum@tplmaps.com

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 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, useState } from 'react';
import {
  PixelRatio,
  UIManager,
  View,
  findNodeHandle,
  TextInput,
  StyleSheet,
  StatusBar,
  Image,
  FlatList,
  Text,
  TouchableOpacity,
  Platform,
  Dimensions,
} from 'react-native';

import MyViewManager, { AddCustomMarkerWithBase64, RemoveAllMarkers, RemoveAllPolyLines, getOptimizedSearch } from 'react-native-tpl-maps-view';
import { useWindowDimensions } from 'react-native';


import { AddMarker, CameraCallback, SetCameraAnimation, SetPolyLine, AddCustomMarker, getSearchPointData } from 'react-native-tpl-maps-view'
import { NativeModules , NativeEventEmitter } from "react-native"
import { useFocusEffect, useNavigation } from '@react-navigation/native'
import { Keyboard } from 'react-native';


const { CustomEventEmitterModule } = NativeModules;
const androidEventEmitter = new NativeEventEmitter(CustomEventEmitterModule);



var windowWidth, windowHeight;


// ************ CREATE FRAGMENT MAP FOR ANDROID **********

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

function Home(): JSX.Element {

  const apikey= '$2a$10$S0hDhKNNZgcC9JR6nPXDBDrUAqj8f5gDLP2a0lLGqCTfNKq5GpvY6' // YOUR TPL MAPS API KEY
  const [data, setData] = useState([]);
  const [isListVisible, setListVisible] = useState(true);
  const [tit, setTit] = useState("");
  const [desc, setDesc] = useState("");
  const [keyboardStatus, setKeyboardStatus] = useState(false);
  const [coordinates, setCoordinates] = useState<{latitude: number | null, longitude: number | null}>({latitude: null, longitude: null});

  
  useEffect(() => {
    const viewId = findNodeHandle(ref.current);
    createFragment(viewId);

    // ****** SOFT KEYBOARD SETTING *******

    const keyboardDidShowListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      () => setKeyboardStatus(true)
    );
    const keyboardDidHideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => setKeyboardStatus(false)
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
    

  }, []);

  const ref = useRef(null);

  if (Platform.OS === 'android') {

    useEffect(() => {

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


        //  ********** Android Callback Listners *********
     const eventListener = androidEventEmitter.addListener('onReady', (event) => {


      const { type, data } = event;
    
  
        if(type === "onMapReady"){
          
          // **** Perform any task on First Time Map Ready

          console.log('onMapReady from Android', data);
      
          //  const delayToShowIcon = setTimeout(() => {
          //   _SetPolyLine()
          // }, 5000);
  
          // return () => clearTimeout(delayToShowIcon);
          
         

        }else if(type === "onMapChange"){

              /// **** Perform any task on on Map change

          console.log('onMapChange from Android:', data);

         const [latitude, longitude] = data.split(';');

         setCoordinates({latitude: data.split(';')[0], longitude: data.split(';')[1]});
           
         fetchReverGeocoding(latitude , longitude);

         _placeMarkerAtCenterPosition(latitude , longitude)

        }else if(type === "onMarkerClick"){

          // **** Perform any task on Marker Click 
        
        const { lat, lng, title, desc } = event;
        console.log(`Marker clicked: lat=${lat}, lng=${lng}, title=${title}, desc=${desc}`);

      

        }
        
      });

      return () => {
        if (eventListener) {
          eventListener.remove();
        }
      };

    }, []);

  //  ********** iOS Callback Listners *********
  }else{
  
     useEffect(() => {
    
  const iOSModuleListner = new NativeEventEmitter(NativeModules.CustomEventEmitter);

  const eventListener = iOSModuleListner.addListener('onReady', (event) => {

    const { type, data } = event;
    
    if (type === 'onMapReady') {

      console.log('Received Lat Lng string from iOS on Map Ready:', data);
      const [latitude, longitude] = data.split(';');

  } else if (type === 'onMapChange') {

      console.log('Received Lat Lng string from iOS on Map Event:', data);
      const [latitude, longitude] = data.split(';');
      fetchReverGeocoding(latitude , longitude);
      

  }else if (type === 'onMarkerClick') {

    const { lat, lng, title, desc } = data;
    
    console.log('Lat', lat);
    console.log('Lng', lng);
    console.log('Title', title);
    console.log('Desc', desc);

    // Your markerClick handling code
}

return () => {
  if (eventListener) {
    eventListener.remove();
  }
};

    });

    }, []);

  }

  useFocusEffect(
    React.useCallback(() => {

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

      console.log(750)

      return () => {

      };
    }, [])
    
  );


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


 // ************ SEARCH API ITEM RENDER AND CLICK ITEM HANDLE ********

  const renderItem = ({ item }: { item: any }) => (
    <TouchableOpacity onPress={() => handleItemClick(item)}>
      <View style={{ padding: 5, backgroundColor: 'white' ,  marginLeft: 20 , marginRight: 20}}>
        <Text style={{ color: 'black' ,fontWeight: 'bold', }}>{item.compound_address_parents}</Text>
        <Text style={{ color: 'grey' ,fontWeight: 'normal', }}>{item.address}</Text>
      </View>
    </TouchableOpacity>
  );

  const handleItemClick = (item: any) => {

  SetCameraAnimation(` ${item.lng};${item.lat}`, "15")

  setData([]); // Clear the list
    setListVisible(false); // Hide the list

  };




    // ************ API SECTION ********

    const fetchSearchApi = async (text: any) => {


      if (text.length < 3) {
        
        return;
      }
  
      try {
  
        if (coordinates.latitude !== null && coordinates.longitude !== null) {
          const latitudeStr = coordinates.latitude.toString();
          const longitudeStr = coordinates.longitude.toString();
        
       
  
  
        const jsonData = await getOptimizedSearch(text ,latitudeStr , longitudeStr  , apikey)
      // Parse JSON data string into JavaScript object
        const responseString = JSON.stringify(jsonData);
        const jsonData2 = await JSON.parse(responseString);
  
        console.log(jsonData2)
        setData(jsonData2);
        setListVisible(true)
  
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      
    };
  
    async function fetchReverGeocoding (latitude: string, longitude: string) {
     
      const jsonData = await getSearchPointData("" , latitude , longitude  , apikey)
     // Parse JSON data string into JavaScript object
    const responseString = JSON.stringify(jsonData);
    const jsonData2 = await JSON.parse(responseString);
    
    // Extract "data" array from the parsed JSON object
     const dataArray = jsonData2.data;
    
    setTit(dataArray[0].name)
    setDesc(dataArray[0].compound_address_parents)
    
    }
  


  return (


    

    <View style={{flex: 1}}>


    {Platform.OS === 'ios' && (
    
    <MyViewManager style={{ flex: 1, marginBottom: 0, marginTop: 0 }} />
   
   )}
   
    {Platform.OS === 'android' && ( 
     
     <MyViewManager 
        ref={ref}
        customWidth={PixelRatio.getPixelSizeForLayoutSize(windowWidth)}
        customHeight={PixelRatio.getPixelSizeForLayoutSize(windowHeight)}
        leftMargin={10}
        rightMargin={0}
        topMargin={0}
        bottomMargin={120}
      />
   
   )}
     

        {/* Rounded corner EditText at the bottom */}
         <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Search for a location..."
          placeholderTextColor="gray"
        
          // Handle any changes to the text
          onChangeText={(text) => fetchSearchApi(text)}
          // Handle the "Done" button press
          onSubmitEditing={(event) => fetchSearchApi(event.nativeEvent.text)}
        />
     
      </View> 


     

    

      <View style={{ marginTop: 150,  position: 'absolute'}}>


      {isListVisible && (
        <FlatList
        
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item}
        />
      )}
      </View>  

      {!keyboardStatus && (
      <View style={styles.container}>
      <Text style={styles.title}>{tit}</Text>
      <Text style={styles.description}>{desc}</Text>


    </View>
    )}

      

    </View>
  );

}


const _placeMarkerAtCenterPosition = (lat: String , lng: String) => {
  
  RemoveAllMarkers()

  var base64String: String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFxSURBVEiJnZUvbkJBEIe/JSQgOEErwZIaisPVVCAwHKKOhGNQzwG4QQUnAAUhRZEKkLU4DDAVDMljuv9gk0nevvnN79uX3Z3nRITYcM61gHegpQGw0JiKyCJqICLeAKrAJ3ACJBAn1VSDPgHzBrCJGNvYAI0sAFAC5neYX2MOlHIAQ0/xEZgAHxoTfWd1wygAqAEHU/QLtD0LaWuuqD0AtRig41lVN3IQuh59p6gpmUP1auZbEfkiMDS3jXlYwIuZf4fMI5obDwvYm/lzBsBqbjws4Meuxjn3FHLWnP3qWw+zaU3+b9oUKHs2uKw5q2+m7sHaU7QE3rgc45o+Lz26dc5FG3gKi70n1psGOYAKsIuYhGIHVHKbXf8BQD+7mypkdof57K52Xeg15wzzM55elQQoZJwBGEc9EoAqsIqYr4j8zZIAhdS5XH9rvgfqyfqUQCE9D6CXVZsjUsioYD7KrXNanBzOuTJw/Td0ReSYU/cHfjZLwpHI7BkAAAAASUVORK5CYII=  ";

    //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64(` ${lng};${lat};0;"";""` , base64String)
}

const _SetCameraAnimation = () => {

  console.log("animate")
  RemoveAllMarkers()
  RemoveAllPolyLines()
  // AddMarker("67.0314459840222;24.801601802801088")
  // Use the same format for passing arguments.
  SetCameraAnimation(" 67.0314459840222;24.801601802801088", "15")
 
}


const _setZoomOnUserLocation = () => {
 // setZoomOnCurrentLocation()
  RemoveAllMarkers()
  RemoveAllPolyLines()
} 

const _SetPolyLine = () => {

  RemoveAllMarkers();
  RemoveAllPolyLines();

  SetCameraAnimation("67.103118;24.820186", "12")

 // Use the same format for passing arguments.

 //Multiple Destination LatLng 
 const destinationTasks = ['24.801976;67.031951' , '24.883838;67.177270' , '24.846263;67.055640' , '24.835181;67.101558' , '24.820303;67.067755' ];

 // Passing Current Location LatLng , Desitnation LatLng and ApiKey
 SetPolyLine("24.820186;67.103118", destinationTasks, "#1D8548" , "2" , "$2a$10$bWCSBfSJFAHSsa8yD3g3Sej2QfUC2vGJp1VoJHsZFlw9gwl7XBST2")


 destinationTasks.forEach((task, index) => {
  const [lat, lng] = task.split(';');
  var base64String: String = "data:image/png;base64,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";

    //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64(` ${lng};${lat};0;"This is Title";"This is description"` , base64String)
});


}





const styles = StyleSheet.create({
  inputContainer: {
    width: '85%',
    marginTop: 80,
    marginLeft: 30,
    position: 'absolute',
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 5,
    backgroundColor: 'white',
    shadowColor: 'grey',
    shadowOffset: { width: 0, height: 2 }, // iOS
    shadowOpacity: 0.2, // iOS
    shadowRadius: 3, // iOS
    elevation: 10,
   
    },
  
  input: {
    fontSize: 14,
    color: '#000',
    marginLeft: 40,
    height: 40
  },
  iconsContainer: {
    position: 'absolute',
    bottom: 120, // Adjust as needed
    right: 15, // Adjust as needed
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    paddingVertical: 10, // Add space vertically
    paddingHorizontal: 5, // Add space horizontally
    
  },
  icons: {
    width: 25,
    height: 25,
    resizeMode: 'contain',
  },
  icon: {
    width: 60,
    height: 60,
    resizeMode: 'contain',
  },
  iconMargin: {
    marginBottom: 1, // Adjust as needed for margin between icons
  },

  iconMargins: {
    marginBottom: 5,
    right: 18 // Adjust as needed for margin between icons
  },

  container: {
    flexDirection: 'column',
    alignItems: 'flex-start', // Center horizontally
    justifyContent: 'flex-end', // Align to the bottom
    position: 'absolute',
    backgroundColor: 'white',
    padding: 10,
    margin: 20,
    borderRadius: 10,
    bottom: 60, // Adjust as needed
    left: 10,
    right: 10,
  },
  title: {
    fontWeight: 'bold',
    marginBottom: 3,
    color: 'black'
  },
  description: {
    marginBottom: 3,
    color: 'black'
  },
});

export default Home;


### BRANCH LOCATOR

import React, { useEffect, useRef, useState } from 'react';
import {
  PixelRatio,
  UIManager,
  View,
  findNodeHandle,
  TextInput,
  StyleSheet,
  StatusBar,
  Image,
  FlatList,
  Text,
  TouchableOpacity,
  Platform,
  Dimensions,
} from 'react-native';

import MyViewManager, { AddCustomMarkerWithBase64, RemoveAllMarkers, RemoveAllPolyLines, getOptimizedSearch, setZoomOnCurrentLocation , EnableLocationButton} from 'react-native-tpl-maps-view';
import { useWindowDimensions } from 'react-native';


import { AddMarker, CameraCallback, SetCameraAnimation, SetPolyLine, AddCustomMarker, getSearchPointData } from 'react-native-tpl-maps-view'
import { NativeModules , NativeEventEmitter } from "react-native"
import { useFocusEffect, useNavigation } from '@react-navigation/native'
import { Keyboard } from 'react-native';


const { CustomEventEmitterModule } = NativeModules;
const androidEventEmitter = new NativeEventEmitter(CustomEventEmitterModule);



var windowWidth, windowHeight;
const cheeziousBranchesDummy = [
  { latitude: 24.899987, longitude: 67.163350 },
  { latitude: 24.860360, longitude: 67.001331 },
  { latitude: 29.344599, longitude: 71.695158 },
  { latitude: 29.392770, longitude: 71.691381 },
  { latitude: 29.417595, longitude: 71.669409 },
  { latitude: 32.065048, longitude: 72.692200 },
  { latitude: 32.101991, longitude: 72.716576 },
  { latitude: 32.025762, longitude: 72.634521 },
  { latitude: 33.718173, longitude: 73.047147 },
  { latitude: 33.715890, longitude: 73.014989 },
  { latitude: 33.702651, longitude: 72.985301 },
  { latitude: 33.676569, longitude: 73.031101 },
  { latitude: 31.582981, longitude: 74.306383 },
  { latitude: 31.547681, longitude: 74.296339 },
  { latitude: 31.486319, longitude: 74.339025 },
  { latitude: 31.465284, longitude: 74.429934 }
];

// ************ CREATE FRAGMENT MAP FOR ANDROID **********

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

  var userCurrentLat = '';
  var userCurrentLng = '';

function Home(): JSX.Element {

  const apikey= '$2a$10$S0hDhKNNZgcC9JR6nPXDBDrUAqj8f5gDLP2a0lLGqCTfNKq5GpvY6' // YOUR TPL MAPS API KEY
  const [data, setData] = useState([]);
  const [isListVisible, setListVisible] = useState(true);
  const [tit, setTit] = useState("");
  const [desc, setDesc] = useState("");
  const [keyboardStatus, setKeyboardStatus] = useState(false);

  //const [userCurrentcoordinates, setUserCurrentcoordinates] = useState({ latitude: '', longitude: '' });
  

  
  useEffect(() => {
    const viewId = findNodeHandle(ref.current);
    createFragment(viewId);

    // ****** SOFT KEYBOARD SETTING *******

    const keyboardDidShowListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      () => setKeyboardStatus(true)
    );
    const keyboardDidHideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => setKeyboardStatus(false)
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
    

  }, []);

  const ref = useRef(null);

  if (Platform.OS === 'android') {

    useEffect(() => {

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


        //  ********** Android Callback Listnerss *********
     const eventListener = androidEventEmitter.addListener('onReady', (event) => {


      const { type, data } = event;
    
  
        if(type === "onMapReady"){
          
          // **** Perform any task on First Time Map Ready
        
          console.log('onMapReady from Android', event);
         
           const delayToShowIcon = setTimeout(() => {
            RemoveAllMarkers();
            RemoveAllPolyLines();
            showAllBranches()
            setCurrentUserIcon(data.split(';')[0], data.split(';')[1])
            userCurrentLat = data.split(';')[0]
            userCurrentLng = data.split(';')[1]
          }, 3000);
  
          return () => clearTimeout(delayToShowIcon);
          
         

        }else if(type === "onMapChange"){

              // **** Perform any task on on Map change

          
          console.log('onMapChange from Android:', data);
          EnableLocationButton(false)

         const [latitude, longitude] = data.split(';');

       
        

        }else if(type === "onMarkerClick"){

          // **** Perform any task on Marker Click 
        
          const { lat, lng, title, desc } = event;
    
          console.log('Lat', lat);
          console.log('Lng', lng);
          console.log('Title', title);
          console.log('Desc', desc);
      

          console.log(userCurrentLat)
          // Your markerClick handling code
          _SetPolyLine(userCurrentLat , userCurrentLng , lat, lng)

      

        }
        
      });

      return () => {
        if (eventListener) {
          eventListener.remove();
        }
      };

    }, []);

  //  ********** iOS Callback Listners *********
  }else{
  
     useEffect(() => {
    
  const iOSModuleListner = new NativeEventEmitter(NativeModules.CustomEventEmitter);

  const eventListener = iOSModuleListner.addListener('onReady', (event) => {

    const { type, data } = event;
    
    if (type === 'onMapReady') {

      console.log('Received Lat Lng string from iOS on Map Ready:', data);
      const [latitude, longitude] = data.split(';');
    
  


  } else if (type === 'onMapChange') {

      console.log('Received Lat Lng string from iOS on Map Event:', data);
      const [latitude, longitude] = data.split(';');
     
    


  }else if (type === 'onMarkerClick') {

    const { markerLat, markerLng, title, desc } = data;
    
    console.log('Lat', markerLat);
    console.log('Lng', markerLng);
    console.log('Title', title);
    console.log('Desc', desc);

   
}

return () => {
  if (eventListener) {
    eventListener.remove();
  }
};

    });

    }, []);

  }

  useFocusEffect(
    React.useCallback(() => {

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

      console.log(750)

      return () => {

      };
    }, [])
    
  );


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


  return (


    

    <View style={{flex: 1}}>


    {Platform.OS === 'ios' && (
    
    <MyViewManager style={{ flex: 1, marginBottom: 0, marginTop: 0 }} />
   
   )}
   
    {Platform.OS === 'android' && ( 
     
     <MyViewManager 
        ref={ref}
        customWidth={PixelRatio.getPixelSizeForLayoutSize(windowWidth)}
        customHeight={PixelRatio.getPixelSizeForLayoutSize(windowHeight)}
        leftMargin={10}
        rightMargin={0}
        topMargin={0}
        bottomMargin={300}
      />
   
   )}
     

      {!keyboardStatus && (
      <View style={styles.container}>
      <Text style={styles.title}>{"Bottom Navigation Space"}</Text>
      <Text style={styles.description}>{"Bottom Navigation Space"}</Text>


    </View>
    )}

      

    </View>
  );

}


const _placeMarkerAtCenterPosition = (lat: String , lng: String) => {
  
  RemoveAllMarkers()

  var base64String: String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFxSURBVEiJnZUvbkJBEIe/JSQgOEErwZIaisPVVCAwHKKOhGNQzwG4QQUnAAUhRZEKkLU4DDAVDMljuv9gk0nevvnN79uX3Z3nRITYcM61gHegpQGw0JiKyCJqICLeAKrAJ3ACJBAn1VSDPgHzBrCJGNvYAI0sAFAC5neYX2MOlHIAQ0/xEZgAHxoTfWd1wygAqAEHU/QLtD0LaWuuqD0AtRig41lVN3IQuh59p6gpmUP1auZbEfkiMDS3jXlYwIuZf4fMI5obDwvYm/lzBsBqbjws4Meuxjn3FHLWnP3qWw+zaU3+b9oUKHs2uKw5q2+m7sHaU7QE3rgc45o+Lz26dc5FG3gKi70n1psGOYAKsIuYhGIHVHKbXf8BQD+7mypkdof57K52Xeg15wzzM55elQQoZJwBGEc9EoAqsIqYr4j8zZIAhdS5XH9rvgfqyfqUQCE9D6CXVZsjUsioYD7KrXNanBzOuTJw/Td0ReSYU/cHfjZLwpHI7BkAAAAASUVORK5CYII=  ";

    //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64(` ${lng};${lat};0;"";""` , base64String)
}

const _SetCameraAnimation = () => {

  console.log("animate")
  RemoveAllMarkers()
  RemoveAllPolyLines()
  // AddMarker("67.0314459840222;24.801601802801088")
  // Use the same format for passing arguments.
  SetCameraAnimation(" 67.0314459840222;24.801601802801088", "15")
 
}


const _setZoomOnUserLocation = () => {
 // setZoomOnCurrentLocation()
  RemoveAllMarkers()
  RemoveAllPolyLines()
} 

const _SetPolyLine = (currentLat: String, currentLng: String , destinationLat: String, destinationLng: String) => {



  RemoveAllPolyLines();

  SetCameraAnimation(`${currentLng};${currentLat}`, "12")


 //Multiple Destination LatLng //
 const destinationTasks = [`${destinationLat};${destinationLng}`];
//const destinationTasks = ['24.801976;67.031951' , '24.883838;67.177270' , '24.846263;67.055640' , '24.835181;67.101558' , '24.820303;67.067755' ];

console.log(destinationTasks)
console.log(`${currentLat};${currentLng}`)

// Passing Current Location LatLng , Desitnation LatLng and ApiKey
SetPolyLine(`${currentLat};${currentLng}`, destinationTasks, "#1D8548" , "2" , "$2a$10$bWCSBfSJFAHSsa8yD3g3Sej2QfUC2vGJp1VoJHsZFlw9gwl7XBST2")


}


const setCurrentUserIcon = (lat: String, lng: String) => {


  var base64String: String = "data:image/png;base64,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";

    //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64(` ${lng};${lat};0;"This is Title";"This is description"` , base64String)

}



const showAllBranches = () => {

  
var base64String: String = "data:image/jpeg;base64,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";
  cheeziousBranchesDummy.forEach((coord, index) => {
  //  console.log(`Index ${index}: Latitude ${coord.latitude}, Longitude ${coord.longitude}`);

     //Lng;Lat;Bearing;Title;Description, Base64 String
  AddCustomMarkerWithBase64(`${coord.longitude};${coord.latitude};0;"Cheezious Branch ${index+1}";"This is description"` , base64String)
  });



  

   

}




const styles = StyleSheet.create({
  inputContainer: {
    width: '85%',
    marginTop: 80,
    marginLeft: 30,
    position: 'absolute',
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 5,
    backgroundColor: 'white',
    shadowColor: 'grey',
    shadowOffset: { width: 0, height: 2 }, // iOS
    shadowOpacity: 0.2, // iOS
    shadowRadius: 3, // iOS
    elevation: 10,
   
    },
  
  input: {
    fontSize: 14,
    color: '#000',
    marginLeft: 40,
    height: 40
  },
  iconsContainer: {
    position: 'absolute',
    bottom: 120, // Adjust as needed
    right: 15, // Adjust as needed
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    paddingVertical: 10, // Add space vertically
    paddingHorizontal: 5, // Add space horizontally
    
  },
  icons: {
    width: 25,
    height: 25,
    resizeMode: 'contain',
  },
  icon: {
    width: 60,
    height: 60,
    resizeMode: 'contain',
  },
  iconMargin: {
    marginBottom: 1, // Adjust as needed for margin between icons
  },

  iconMargins: {
    marginBottom: 5,
    right: 18 // Adjust as needed for margin between icons
  },

  container: {
    flexDirection: 'column',
    alignItems: 'center', // Center horizontally
    justifyContent: 'flex-end', // Align to the bottom
    position: 'absolute',
    backgroundColor: 'white',
    padding: 10,
    margin: 20,
    borderRadius: 10,
    bottom: 10, // Adjust as needed
    left: 10,
    right: 10,
  },
  title: {
    fontWeight: 'bold',
    marginBottom: 3,
    color: 'black'
  },
  description: {
    marginBottom: 3,
    color: 'black'
  },
});

export default Home;

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


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 daniyal.khan@tplmaps.com

License

MIT

Keywords

tplmaps

FAQs

What is react-native-tpl-maps-view?

Is react-native-tpl-maps-view popular?

Is react-native-tpl-maps-view well maintained?

Package last updated on 09 Apr 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-native-tpl-maps-view