JavaScript/jQuery Map Options

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

This property is used when the UI component is displayed on a platform whose guidelines include the active state change for UI components.

If autoAdjust is enabled, zoom is set to the maximum value allowing all markers and routes to be displayed at the same time. The center is changed so that markers and routes are aligned with the UI component's center. Set the autoAdjust property to false to disable this behavior.

Note that the zoom level can only be automatically decreased to display all markers and routes. If the current zoom level allows all routes and markers to be displayed on the map, it remains unchanged.

You can specify the center value in one of the following formats:

• { lat: 40.749825, lng: -73.987963}
• "40.749825, -73.987963"
• [40.749825, -73.987963]
• "Brooklyn Bridge,New York,NY"

When you use the Map as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, this property accepts either a string value indicating the address, or two double type values indicating the coordinates.

@(Html.DevExtreme().Map()
    .Center("Brooklyn Bridge,New York,NY")
    // ===== or =====
    .Center(40.74982, -73.987963)
)

@(Html.DevExtreme().Map() _
    .Center("Brooklyn Bridge,New York,NY") _
    ' ===== or =====
    .Center(40.74982, -73.987963)
)

Assign a Boolean value to this property to enable or disable all controls at once - both the map navigation control and the map type control.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

To set a custom icon for an individual marker, specify the iconSrc field of the corresponding marker data source object.

View Demo

If you use the Knockout approach when working with the Map UI component, you can pass an observable array to the markers property to easily manage markers.

View Demo

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

See Also

• Add and Remove a Marker

See Also

• Add and Remove a Marker

The following example shows how to subscribe to component property changes:

$(function() {
    $("#mapContainer").dxMap({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-map ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-map>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxMapModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxMapModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxMap ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxMap from 'devextreme-vue/map'; 

export default { 
    components: { 
        DxMap
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

import Map from 'devextreme-react/map'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Map ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

See Also

• Add and Remove a Route

See Also

• Add and Remove a Route

Use the "googleStatic" provider to connect route points directly rather than by following the street layout.

Use the GeoMapProvider enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Bing, Google, and GoogleStatic.

View Demo

View Demo

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

The available property values are based on map types supported by the Google map provider. If you use the Bing map, the UI component casts the property value to the appropriate value supported by the "Bing" provider.

• hybrid -> Aerial
• roadmap -> Road

Use the GeoMapType enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Hybrid, Roadmap, and Satellite.

View Demo

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }