How to: Specify the Map Center Using Human-Readable Location Instead of Numeric Coordinates

• Jul 20, 2023
• 2 minutes to read

This topic describes how to access the dxMap widget directly using JavaScript code in an application created according to the Use Raster Maps tutorial. This may be required if you need to customize the widget options that are not mapped to properties of the IModelMapSettings node in the Model Editor. In this example, the center option specifying the location displayed at the center of the widget is customized using the human-readable address instead of numeric coordinates. The autoAdjust option also changed.

1. Add the WebMapCenterController View Controller to the ASP.NET Web Forms module project.
2. In the constructor, set the ViewController.TargetObjectType property to IMapsMarker and the ViewController.TargetViewType to ViewType.ListView.
3. Override the OnViewControlsCreated method and access the WebMapsListEditor List Editor and its MapViewer control. This control exposes the MapViewer.ClientSideEvents property, which allows you to assign JavaScript handlers to the client-side events.
4. Handle the MapViewerClientSideEvents.Customize client-side event to change the center and autoAdjust options.

C#

using DevExpress.Persistent.Base;
using DevExpress.ExpressApp.Maps.Web;
// ...
public class WebMapCenterController : ViewController {
    public WebMapCenterController() {
        TargetObjectType = typeof(IMapsMarker);
        TargetViewType = ViewType.ListView;
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        WebMapsListEditor mapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
        if (mapsListEditor != null) {
            mapsListEditor.MapViewer.ClientSideEvents.Customize = @"
function(sender, map) {
    map.option('center', 'Brooklyn Bridge, New York, NY');
    map.option('autoAdjust', false);
}";
        }
    }
}

VB.NET

Imports Microsoft.VisualBasic
Imports DevExpress.Persistent.Base
Imports DevExpress.ExpressApp.Maps.Web
' ...
Public Class WebMapCenterController
    Inherits ViewController
    Public Sub New()
        TargetObjectType = GetType(IMapsMarker)
        TargetViewType = ViewType.ListView
    End Sub
    Protected Overrides Sub OnViewControlsCreated()
        MyBase.OnViewControlsCreated()
        Dim mapsListEditor As WebMapsListEditor = TryCast(CType(View, ListView).Editor, WebMapsListEditor)
        If mapsListEditor IsNot Nothing Then
            mapsListEditor.MapViewer.ClientSideEvents.Customize = _
"function(sender, map) {" & ControlChars.CrLf & _
"    map.option('center', 'Brooklyn Bridge, New York, NY');" & ControlChars.CrLf & _
"    map.option('autoAdjust', false);" & ControlChars.CrLf & _
"}"
        End If
    End Sub
End Class

The result is demonstrated in the image below.