Hi all, I need to get the user's current location (Latitude and Longitude) and display it on a map in a Reactive Web application. Could anyone explain how to implement this in OutSystems Reactive Web, including obtaining the coordinates and showing the current location marker on the map?
As per oml Attachment
Dear,just use this JS , it will give u browser lat and long
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { // Success: Assign values to OutSystems parameters $parameters.Latitude = position.coords.latitude; $parameters.Longitude = position.coords.longitude; // Note: Since this is asynchronous, you may need // a callback or a custom event to notify the UI. $resolve(); }, function(error) { console.error("Error Code: " + error.code + " - " + error.message); $resolve(); } );} else { console.error("Geolocation is not supported by this browser."); $resolve();}
Hi @maged shokry ,
I would suggest going through the following documentation, which explains how to set a marker on a map using latitude and longitude:
https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/interaction/map/how_to_add_a_marker_on_map_click/
To obtain the user's current location, you can use the JavaScript code below. This script uses the browser's built-in Geolocation API to request access to the device's location. Once the user grants permission, the latitude and longitude coordinates are retrieved and returned through the output parameters.
If the location is successfully obtained, the Latitude, Longitude, and IsSuccess output parameters are populated accordingly. If the user denies permission, the location is unavailable, or the request times out, an appropriate error message is returned through the ErrorMessage output parameter.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
$parameters.Latitude = position.coords.latitude;
$parameters.Longitude = position.coords.longitude;
$parameters.IsSuccess = true;
$parameters.ErrorMessage = "";
},
function(error) {
$parameters.IsSuccess = false;
$parameters.ErrorMessage = error.message;
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
} else {
$parameters.ErrorMessage = "Geolocation is not supported by this browser.";
}Regards,Abhijith G