Your search did not match any results.
Map

Providers and Types

Documentation

By default, the Map widget uses Google Maps as a map provider. It can use Bing Maps or Google Static Maps instead. You can change the provider using the provider option.

In addition, the Map widget supports the following map types: «hybrid», «satellite» and «roadmap», which is used by default. To change the map type, use the type option.

Copy to Plunker
Apply
Reset
<dx-map #map center="Brooklyn Bridge,New York,NY" [zoom]="14" [height]="400" width="100%" [provider]="mapProviders[0].key" [type]="mapTypes[0].key"> </dx-map> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Provider</span> <dx-select-box [dataSource]="mapProviders" displayExpr="name" valueExpr="key" [(value)]="map.provider"> </dx-select-box> </div> <div class="option"> <span>Map Type</span> <dx-select-box [dataSource]="mapTypes" displayExpr="name" valueExpr="key" [(value)]="map.type"> </dx-select-box> </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxMapModule, DxSelectBoxModule } from 'devextreme-angular'; import { MapSetting, Service } from './app.service'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [ Service ], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { mapTypes: MapSetting[]; mapProviders: MapSetting[]; constructor(service: Service) { this.mapTypes = service.getMapTypes(); this.mapProviders = service.getMapProviders(); } } @NgModule({ imports: [ BrowserModule, DxMapModule, DxSelectBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
/deep/ .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } /deep/ .caption { font-size: 18px; font-weight: 500; } /deep/ .option { margin-top: 10px; } /deep/ .option > span { display: inline-block; width: 100px; } /deep/ .option > .dx-selectbox { width: 100%; max-width: 350px; display: inline-block; vertical-align: middle; }
import { Injectable } from '@angular/core'; export class MapSetting { key: string; name: string; } let mapTypes: MapSetting[] = [{ key: "roadmap", name: "Default Map" }, { key: "satellite", name: "Photographic Map" }, { key: "hybrid", name: "Hybrid Map" }]; let mapProviders: MapSetting[] = [{ key: "google", name: "Google Dynamic Map" }, { key: "googleStatic", name: "Google Static Map" }, { key: "bing", name: "Bing Map" }]; @Injectable() export class Service { getMapTypes(): MapSetting[] { return mapTypes; } getMapProviders(): MapSetting[] { return mapProviders; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@17.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@17.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.win10.white.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>