react-native-tpl-maps-view
v2.2.4
Published
TPL Maps React Native Package
Readme
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 (Mobile Development) - [email protected]
- Zaeem Ehsanullah - Assistant Manager (Mobile Application 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 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= '' // 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 - Latest Arch V2.2.0+
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, EnableLocationButton, RemoveAllMarkers, RemoveAllPolyLines, getOptimizedSearch, setZoomOnCurrentLocation} 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';
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 }
];
var userCurrentLat = '';
var userCurrentLng = '';
const apikey= '' // YOUR TPL MAPS API KEY
function BranchLocator(): JSX.Element {
const ref = useRef(null);
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
// Start with no style, apply after mount to force layout re-pass
const [mapStyle, setMapStyle] = useState({});
useEffect(() => {
// Small delay then apply real style — forces Fabric to re-layout
// the view with real dimensions, triggering GLSurfaceView surfaceCreated
const timer = setTimeout(() => {
setMapStyle({ flex: 1, width: '100%', height: '100%' });
}, 3000);
return () => clearTimeout(timer);
}, []);
const [data, setData] = useState([]);
const [isListVisible, setListVisible] = useState(true);
const [tit, setTit] = useState("");
const [desc, setDesc] = useState("");
const [keyboardStatus, setKeyboardStatus] = useState(false);
const [bottomMargin , setBottomMargin] = useState(0);
//const [userCurrentcoordinates, setUserCurrentcoordinates] = useState({ latitude: '', longitude: '' });
useFocusEffect(() =>{
setBottomMargin(400)
})
if (Platform.OS === 'android') {
const { CustomEventEmitterModule } = NativeModules;
const androidEventEmitter = new NativeEventEmitter(CustomEventEmitterModule);
useEffect(() => {
// ********** Android Callback Listnerss *********
const eventListener = androidEventEmitter.addListener('onReady', (event) => {
const { type, data } = event;
if(type === "onMapReady"){
console.log('onMapReady from Android', event);
// **** Perform any task on First Time Map Ready
// Apply style when map signals it's ready
setTimeout(() => {
setMapStyle({ flex: 1, width: '100%', height: '100%' });
}, 100);
// when location off data will be empty
// if(data == ""){
// SetCameraAnimation(`${67.103126};${24.820370}`, "16")
// showAllBranches()
// return
// }
RemoveAllMarkers();
RemoveAllPolyLines();
const delayToShowIcon = setTimeout(() => {
showAllBranches()
setCurrentUserIcon("24.820370", "67.103126")
SetCameraAnimation("67.103126;24.820370", "12")
userCurrentLat = "24.820370"
userCurrentLng = "67.103126"
}, 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)
}else if(type == "onPolyLineClick"){
console.log('Polyline Click from Android:', data);
}
});
return () => {
if (eventListener) {
eventListener.remove();
RemoveAllMarkers();
}
};
}, []);
// ********** 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(';');
const delayToShowIcon = setTimeout(() => {
userCurrentLat = data.split(';')[0]
userCurrentLng = data.split(';')[1]
EnableLocationButton(false)
RemoveAllMarkers();
RemoveAllPolyLines();
setCurrentUserIcon(data.split(';')[0], data.split(';')[1])
showAllBranches()
}, 1000);
return () => clearTimeout(delayToShowIcon);
} 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 { lat, lng, title, desc } = data;
console.log('Lat', lat);
console.log('Lng', lng);
console.log('Title', title);
console.log('Desc', desc);
_SetPolyLine(userCurrentLat , userCurrentLng , lat, lng)
}
});
return () => {
if (eventListener) {
iOSModuleListner.removeAllListeners;
eventListener.remove();
}
};
}, []);
}
return (
<View style={{ flex: 1 }}>
{Platform.OS === 'android' && (
<MyViewManager
ref={ref}
style={mapStyle}
customWidth={PixelRatio.getPixelSizeForLayoutSize(windowWidth)}
customHeight={PixelRatio.getPixelSizeForLayoutSize(windowHeight)}
/>
)}
{Platform.OS === 'ios' && (
<MyViewManager style={{ flex: 1 }} />
)}
<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" , apikey)
}
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 BranchLocator;
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 [email protected]
License
MIT