Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxMap/Configuration/ below:

Vue Map Props | Vue Documentation

An object defining configuration properties for the Map UI component.

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

Selector: access-key

Default Value: undefined

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

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

Selector: active-state-enabled

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.

Keys to authenticate the component within map providers.

Selector: DxApiKey

Default Value: { azure: '', 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.

$(function() {
    $("#mapContainer").dxMap({
        // ...
        apiKey: {
            azure: "MY_AZURE_MAPS_KEY",
            google: "MY_GOOGLE_MAPS_KEY",
            googleStatic: "MY_GOOGLE_STATIC_MAPS_KEY"
        }
    });
});

<dx-map ... >
    <dxo-api-key
        azure="MY_AZURE_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 { }

<template>
    <DxMap ... >
        <DxApiKey
            azure="MY_AZURE_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>

import React from 'react';

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

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

const App = () => {
    return (
        <Map ... >
            <ApiKey
                azure="MY_AZURE_MAPS_KEY"
                google="MY_GOOGLE_MAPS_KEY"
                googleStatic="MY_GOOGLE_STATIC_MAPS_KEY"
            />
        </Map>
    );
}
export default App;

View Demo

The value of this property cannot be changed dynamically.

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.

Selector: auto-adjust

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.

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.

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"

Specifies whether or not map UI component controls are available.

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.

Specifies whether the UI component responds to user interaction.

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

Selector: DxElementAttr

Default Value: {}

$(function(){
    $("#mapContainer").dxMap({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-map ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-map>

import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})

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

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;

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

Selector: focus-state-enabled

Default Value: true (desktop)

Specifies the UI component's height.

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", "20vh", "80%", "inherit".

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

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

Selector: hover-state-enabled

Default Value: false

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

Selector: marker-icon-src

An array of markers displayed on a map.

View Demo

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

Selector: @click

Information about the event.

Object structure:

Map

The UI component's instance.

HTMLElement | jQuery

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

Event (jQuery or EventObject)

The event that triggered the function. It can be:

• An EventObject or a jQuery.Event with the 'googleStatic' provider.
• A native event with the 'google' and 'azure' providers.
• Unspecified with the 'bing' provider.

MapLocation

The clicked location. Unspecified with the 'googleStatic' provider.

Default Value: null

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

Selector: @disposing

Information about the event.

Object structure:

Default Value: null

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

Selector: @initialized

Information about the event.

Object structure:

Default Value: null

<dx-map ...
    (onInitialized)="saveInstance($event)">
</dx-map>

import { Component } from "@angular/core";
import Map from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    mapInstance: Map;
    saveInstance (e) {
        this.mapInstance = e.component;
    }
}

App.vue (Composition API)

<template>
    <div>
        <DxMap ...
            @initialized="saveInstance">
        </DxMap>
    </div>
</template>

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

export default {
    components: {
        DxMap
    },
    data: function() {
        return {
            mapInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.mapInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxMap ...
            @initialized="saveInstance">
        </DxMap>
    </div>
</template>

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

let mapInstance = null;

const saveInstance = (e) => {
    mapInstance = e.component;
}
</script>

import Map from 'devextreme-react/map';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.mapInstance = e.component;
    }

    render() {
        return (
            <div>
                <Map onInitialized={this.saveInstance} />
            </div>
        );
    }
}

• Get a UI component Instance in jQuery

• Get a UI component Instance in Angular

• Get a UI component Instance in Vue

• Get a UI component Instance in React

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

Selector: @marker-added

Information about the event.

Object structure:

Map

The UI component's instance.

HTMLElement | jQuery

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

Object

The added marker's data.

Object

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

Default Value: null

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

Selector: @marker-removed

Information about the event.

Object structure:

Default Value: null

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

Selector: @option-changed

Information about the event.

Object structure:

The modified property's new value.

The UI component's previous value.

String

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

String

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

HTMLElement | jQuery

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

Map

The UI component's instance.

Default Value: null

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.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.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}
        />        
    ); 
} 

A function that is executed when the map is ready.

Selector: @ready

Information about the event.

Object structure:

Default Value: null

You can use the component field to access properties that are common to all supported Map providers. To access provider-specific API, utilize the originalMap parameter.

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

Selector: @route-added

Information about the event.

Object structure:

Map

The UI component's instance.

HTMLElement | jQuery

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

Object

The added route's data.

Object

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

Default Value: null

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

Selector: @route-removed

Information about the event.

Object structure:

Default Value: null

The name of the current map data provider.

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

View Demo

Each provider offers different functionality that you can integrate. Refer to the following examples to learn about functionality offered by Google Maps:

View on GitHub View on GitHub View on GitHub

A provider configuration object.

Selector: DxProviderConfig

Default Value: { mapId: '', useAdvancedMarkers: true }

$(function () {
    $("#map").dxMap({
        apiKey: "YOUR_API_KEY",
        provider: "google",
        providerConfig: {
            mapId: "YOUR_GOOGLE_MAP_ID"
        }
    });
});

<dx-map ... 
    provider="google"
    apiKey="YOUR_API_KEY"
>
    <dxo-provider-config
        mapId="YOUR_GOOGLE_MAP_ID"
    >
    </dxo-provider-config>
</dx-map>

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 ... 
        provider="google"
        api-key="YOUR_API_KEY"
    >
        <DxProviderConfig 
            map-id="YOUR_GOOGLE_MAP_ID"
        />
    </DxMap>
</template>

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

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

export default {
    components: {
        DxMap,
        DxProviderConfig
    }
}
</script>

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

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

const App = () => {
    return (
        <Map ... 
            provider="google"
            apiKey="YOUR_API_KEY"
        >
            <ProviderConfig 
                mapId="YOUR_GOOGLE_MAP_ID"
            />
        </Map>
    );
}
export default App;

An array of routes shown on the map.

View Demo

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

Selector: rtl-enabled

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.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

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

Selector: tab-index

Default Value: 0

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

Specifies whether the UI component is visible.

Specifies the UI component's width.

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", "20vw", "80%", "auto", "inherit".

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4