How to: Set the Latitude and Longitude of a Map Marker to the Current Location

• Jul 08, 2021
• 3 minutes to read

This topic describes how to implement an Action that passes the user’s coordinates to the Latitude and Longitude properties in a Detail View using the HTML Geolocation API. Here, it is assumed that you have an application created according to the Use Raster Maps tutorial.

Add the following Controller to the ASP.NET Web Forms module project.

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Web.SystemModule;
using DevExpress.ExpressApp.Web.Templates.ActionContainers;
using DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu;
using DevExpress.Persistent.Base;
// ...
public class FillCoordinatesController : ViewController<DetailView> {
    private SimpleAction getPositionAction;
    public FillCoordinatesController() {
        TargetObjectType = typeof(IMapsMarker); 

        getPositionAction = new SimpleAction(
            this, "Get current position",
            PredefinedCategory.Edit);            

        string getPositionClientScript = @"
function idContains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return [].filter.call(elements, function(element){
    return RegExp(text).test(element.id);
  });
}

function setLocalizedValueToInput(input, value) {
    var curValue = input.value.toString();
    var newValue = value.toString();    
    var isCommaAsFloatPoint = curValue.indexOf(',') > -1;

    if (isCommaAsFloatPoint)
        newValue = newValue.replace('.', ',');

    input.value = newValue;
}

function showMap(position) {
  var latitude = position.coords.latitude;
  var latInputs = idContains('input', 'Latitude_Edit(?!.*Info$)');  
  if (latInputs.length == 1) { setLocalizedValueToInput(latInputs[0], latitude); }

  var longitude = position.coords.longitude;
  var lonInputs = idContains('input', 'Longitude_Edit(?!.*Info$)'); 
  if (lonInputs.length == 1) { setLocalizedValueToInput(lonInputs[0], longitude); }
}

navigator.geolocation.getCurrentPosition(showMap);";

        getPositionAction.SetClientScript(getPositionClientScript, false);
    }

    protected override void OnActivated() {
        base.OnActivated();
        View.ViewEditModeChanged += DetailView_ViewEditModeChanged;
        UpdateActionState();
    }
    protected override void OnDeactivated() {            
        View.ViewEditModeChanged -= DetailView_ViewEditModeChanged;
        base.OnDeactivated();
    }
    private void DetailView_ViewEditModeChanged(object sender, System.EventArgs e) {
        UpdateActionState();
    }
    private void UpdateActionState() {
        getPositionAction.Enabled["EditMode"] = View.ViewEditMode == DevExpress.ExpressApp.Editors.ViewEditMode.Edit;
    }
}

VB.NET

Imports Microsoft.VisualBasic
Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Actions
Imports DevExpress.ExpressApp.Web.SystemModule
Imports DevExpress.ExpressApp.Web.Templates.ActionContainers
Imports DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu
Imports DevExpress.Persistent.Base
' ...
Public Class FillCoordinatesController
    Inherits ViewController(Of DetailView)

    Private getPositionAction As SimpleAction
    Public Sub New()
        TargetObjectType = GetType(IMapsMarker)

        getPositionAction = New SimpleAction(Me, "Get current position", PredefinedCategory.Edit)

        Dim getPositionClientScript As String = _
"function idContains(selector, text) {" & ControlChars.CrLf & _
"  var elements = document.querySelectorAll(selector);" & ControlChars.CrLf & _
"  return [].filter.call(elements, function(element){" & ControlChars.CrLf & _
"    return RegExp(text).test(element.id);" & ControlChars.CrLf & _
"  });" & ControlChars.CrLf & _
"}" & ControlChars.CrLf & _
ControlChars.CrLf & "function setLocalizedValueToInput(input, value) {" & ControlChars.CrLf & _
"    var curValue = input.value.toString();" & ControlChars.CrLf & _
"    var newValue = value.toString();    " & ControlChars.CrLf & _
"    var isCommaAsFloatPoint = curValue.indexOf(',') > -1;" & ControlChars.CrLf & _
"    " & ControlChars.CrLf & _
"    if (isCommaAsFloatPoint)" & ControlChars.CrLf & _
"        newValue = newValue.replace('.', ',');" & ControlChars.CrLf & _
ControlChars.CrLf & "    input.value = newValue;" & ControlChars.CrLf & _
"}" & ControlChars.CrLf & _
ControlChars.CrLf & _
"function showMap(position) {" & ControlChars.CrLf & _
"  var latitude = position.coords.latitude;" & ControlChars.CrLf & _
"  var latInputs = idContains('input', 'Latitude_Edit(?!.*Info$)');  " & ControlChars.CrLf & _
"  if (latInputs.length == 1) { setLocalizedValueToInput(latInputs[0], latitude); }" & ControlChars.CrLf & _
ControlChars.CrLf & "  var longitude = position.coords.longitude;" & ControlChars.CrLf & _
"  var lonInputs = idContains('input', 'Longitude_Edit(?!.*Info$)'); " & ControlChars.CrLf & _
"  if (lonInputs.length == 1) { setLocalizedValueToInput(lonInputs[0], longitude); }" & ControlChars.CrLf & _
"}" & ControlChars.CrLf & _
ControlChars.CrLf & "navigator.geolocation.getCurrentPosition(showMap);"

        getPositionAction.SetClientScript(getPositionClientScript, False)
    End Sub

    Protected Overrides Sub OnActivated()
        MyBase.OnActivated()
        AddHandler View.ViewEditModeChanged, AddressOf DetailView_ViewEditModeChanged
        UpdateActionState()
    End Sub
    Protected Overrides Sub OnDeactivated()
        RemoveHandler View.ViewEditModeChanged, AddressOf DetailView_ViewEditModeChanged
        MyBase.OnDeactivated()
    End Sub
    Private Sub DetailView_ViewEditModeChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        UpdateActionState()
    End Sub
    Private Sub UpdateActionState()
        getPositionAction.Enabled("EditMode") = View.ViewEditMode = DevExpress.ExpressApp.Editors.ViewEditMode.Edit
    End Sub
End Class

Run the ASP.NET Web Forms application and edit an object that supports the IBaseMapsMarker interface (e.g., the Location object demonstrated in the Use Raster Maps topic). Click Get current position. The Latitude and Longitude editors will be filled with the current coordinates.

Note that the browser may warn you that the site wants to track your physical location.