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

  • 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

    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() {
            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);

    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.
    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() {
            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');

    The result is demonstrated in the image below.


See Also