React Map Props

An object defining configuration properties for the Map UI component.

See Also

accessKey

Specifies the shortcut key that sets focus on the UI component.

Type:

String

Default Value: undefined

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

activeStateEnabled

Specifies whether the UI component changes its state as a result of user interaction.

Type:

Boolean

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components. See the following GitHub repository for an example of this type of platform: MUI.

apiKey

Keys to authenticate the component within map providers.

Selector: ApiKey
Type:

String

|

Object

Default Value: { bing: '', google: '', googleStatic: '' }

If you have more than one map provider in your application, specify the keys in the object fields as shown below. Otherwise, you can assign the key directly to the apiKey property.

jQuery
index.js
$(function() {
    $("#mapContainer").dxMap({
        // ...
        apiKey: {
            bing: "MY_BING_MAPS_KEY",
            google: "MY_GOOGLE_MAPS_KEY",
            googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-map ... >
    <dxo-api-key
        bing="MY_BING_MAPS_KEY"
        google="MY_GOOGLE_MAPS_KEY"
        googleStatic="MY_GOOGLE_STATIC_MAPS_KEY">
    </dxo-api-key>
</dx-map>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }
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 { }
Vue
App.vue
<template>
    <DxMap ... >
        <DxApiKey
            bing="MY_BING_MAPS_KEY"
            google="MY_GOOGLE_MAPS_KEY"
            googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
        />
    </DxMap>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxMap, {
    DxApiKey
} from 'devextreme-vue/map';

export default {
    components: {
        DxMap,
        DxApiKey
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Map, {
    ApiKey
} from 'devextreme-react/map';

const App = () => {
    return (
        <Map ... >
            <ApiKey
                bing="MY_BING_MAPS_KEY"
                google="MY_GOOGLE_MAPS_KEY"
                googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
            />
        </Map>
    );
}
export default App;
NOTE
The value of this property cannot be changed dynamically.

autoAdjust

Specifies whether the UI component automatically adjusts center and zoom property values when adding a new marker or route, or if a new UI component contains markers or routes by default.

Type:

Boolean

Default Value: true

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.

center

An object, a string, or an array specifying which part of the map is displayed at the UI component's center using coordinates. The UI component can change this value if autoAdjust is enabled.

Selector: Center
Type:

Object

|

String

|

Array<Number>

Raised Events: onOptionChanged

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"

controls

Specifies whether or not map UI component controls are available.

Type:

Boolean

Default Value: false

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.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type: any
Default Value: {}

jQuery
$(function(){
    $("#mapContainer").dxMap({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-map ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMap ...
        :element-attr="mapAttributes">
    </DxMap>
</template>

<script>
import DxMap from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            mapAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Map from 'devextreme-react/map';

class App extends React.Component {
    mapAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Map ...
                elementAttr={this.mapAttributes}>
            </Map>
        );
    }
}
export default App;

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Boolean

Default Value: true (desktop)

height

Specifies the UI component's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's height.

Default Value: 300

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;
    }

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Type:

Boolean

Default Value: false

key Deprecated

Use the apiKey property instead.

A key used to authenticate the application within the required map provider.

Selector: Key
Type:

String

|

Object

Default Value: { bing: '', google: '', googleStatic: '' }

jQuery
index.js
$(function() {
    $("#mapContainer").dxMap({
        // ...
        key: {
            bing: "MY_BING_MAPS_KEY",
            google: "MY_GOOGLE_MAPS_KEY",
            googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-map ... >
    <dxo-key
        bing="MY_BING_MAPS_KEY"
        google="MY_GOOGLE_MAPS_KEY"
        googleStatic="MY_GOOGLE_STATIC_MAPS_KEY">
    </dxo-key>
</dx-map>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }
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 { }
Vue
App.vue
<template>
    <DxMap ... >
        <DxKey
            bing="MY_BING_MAPS_KEY"
            google="MY_GOOGLE_MAPS_KEY"
            googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
        />
    </DxMap>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxMap, {
    DxKey
} from 'devextreme-vue/map';

export default {
    components: {
        DxMap,
        DxKey
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Map, {
    Key
} from 'devextreme-react/map';

class App extends React.Component {
    render() {
        return (
            <Map ... >
                <Key
                    bing="MY_BING_MAPS_KEY"
                    google="MY_GOOGLE_MAPS_KEY"
                    googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
                />
            </Map>
        );
    }
}
export default App;
NOTE
The value of this property cannot be changed dynamically.

markerIconSrc

A URL pointing to the custom icon to be used for map markers.

Type:

String

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

View Demo

markers[]

An array of markers displayed on a map.

Selector: Marker
Type:

Array<Object>

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

onClick

A function that is executed when any location on the map is clicked or tapped.

Type:

Function

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.

location

Object

The clicked point's location on the map (if the "google" or "bing" provider is used).

model any

Model data. Available only if Knockout is used.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

See Also

onMarkerAdded

A function that is executed when a marker is created on the map.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if Knockout is used.

options

Object

The added marker's data.

originalMarker

Object

The original marker that the current map provider uses (only for "google" and "bing" providers).

Default Value: null

onMarkerRemoved

A function that is executed when a marker is removed from the map.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if Knockout is used.

options

Object

The removed marker's data.

Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.

fullName

String

The path to the modified property that includes all parent properties.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Map

The UI component's instance.

name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

value any

The modified property's new value.

Default Value: null

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

jQuery
index.js
$(function() {
    $("#mapContainer").dxMap({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<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 { }  
Vue
App.vue
<template> 
    <DxMap ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
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> 
React
App.js
import React from 'react';  
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}
        />        
    ); 
} 

onReady

A function that is executed when the map is ready.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if Knockout is used.

originalMap

Object

The current provider's map data.

Default Value: null

onRouteAdded

A function that is executed when a route is created on the map.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if Knockout is used.

options

Object

The added route's data.

originalRoute

Object

The original route that the current map provider uses (only for "google" and "bing" providers).

Default Value: null

onRouteRemoved

A function that is executed when a route is removed from the map.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Map

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if Knockout is used.

options

Object

The removed route's data.

Default Value: null

provider

The name of the current map data provider.

Type:

String

Default Value: 'google'
Accepted Values: 'bing' | 'google' | 'googleStatic'

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

View Demo

routes[]

An array of routes shown on the map.

Selector: Route
Type:

Array<Object>

Raised Events: onRouteAdded onRouteRemoved

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

Boolean

Default Value: false

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.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

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

type

The type of a map to display.

Type:

String

Default Value: 'roadmap'
Accepted Values: 'hybrid' | 'roadmap' | 'satellite'

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

View Demo

visible

Specifies whether the UI component is visible.

Type:

Boolean

Default Value: true

width

Specifies the UI component's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's width.

Default Value: 300

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;
    }

zoom

The map's zoom level. The UI component can change this value if autoAdjust is enabled.

Type:

Number

Default Value: 1
Raised Events: onOptionChanged