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

• Oct 21, 2020
• 3 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 or IModelMobileMapSettings 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.

• ASP.NET-Oriented Controller

  • Add the WebMapCenterController View Controller to the ASP.NET module project.
  • In the constructor, set the ViewController.TargetObjectType property to IMapsMarker and the ViewController.TargetViewType to ViewType.ListView.
  • 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.
  • 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.

  

• Mobile-Oriented Controller

  • Add the MobileMapCenterController View Controller to the Mobile module project.
  • In the constructor, set the ViewController.TargetViewId property, for example, to MapsMarker_ListView.
  • Override the OnViewControlsCreated method and access the MobileMapsListEditor List Editor and its Map control.
  • Specify the control’s Map.OnCustomize property with the string which is the JavaScript client-side event to change the center and autoAdjust options. Note that JavaScript code should be enclosed in brackets.
  C#

  using DevExpress.ExpressApp;
  using DevExpress.ExpressApp.Maps.Mobile;
  using DevExpress.ExpressApp.Maps.Mobile.Editors;
  //...
  public class MobileMapCenterController : ViewController<ListView> {
      public MobileMapCenterController() {
          TargetViewId = "MapsMarker_ListView";
      }
      protected override void OnViewControlsCreated() {
          base.OnViewControlsCreated();
          MobileMapsListEditor mobileMapsListEditor = View.Editor as MobileMapsListEditor;
          if (mobileMapsListEditor != null) {
              Map map = mobileMapsListEditor.Control as Map;
              map.OnCustomize = @"
              (function(map) {
                  map.option('center', 'Brooklyn Bridge,New York,NY');
                  map.option('autoAdjust', 'false');
              })";
          }
      }
  }
  

  VB.NET

  Imports Microsoft.VisualBasic
  Imports DevExpress.ExpressApp
  Imports DevExpress.ExpressApp.Maps.Mobile
  Imports DevExpress.ExpressApp.Maps.Mobile.Editors
  '...
  Public Class MobileMapCenterController
      Inherits ViewController(Of ListView)
  
      Public Sub New()
          TargetViewId = "MapsMarker_ListView"
      End Sub
      Protected Overrides Sub OnViewControlsCreated()
          MyBase.OnViewControlsCreated()
          Dim mobileMapsListEditor As MobileMapsListEditor = TryCast(View.Editor, MobileMapsListEditor)
          If mobileMapsListEditor IsNot Nothing Then
              Dim map As Map = TryCast(mobileMapsListEditor.Control, Map)
              map.OnCustomize = "" & ControlChars.CrLf & _
  "            (function(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.