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.

@(Html.DevExtreme().Map() .ID("map") .Center("Brooklyn Bridge,New York,NY") .Zoom(14) .Height(400) .Width("100%") .Provider(GeoMapProvider.Bing) // NOTE: Specify your map API keys for every used provider //.Key(k => k // .Bing("YOUR_BING_MAPS_API_KEY") // .Google("YOUR_GOOGLE_MAPS_API_KEY") // .GoogleStatic("YOUR_GOOGLE_STATIC_MAPS_API_KEY") //) .Type(GeoMapType.Roadmap) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Map Provider</span> @(Html.DevExtreme().SelectBox() .ID("choose-provider") .DataSource(new[] { new { key = GeoMapProvider.Bing, name = "Bing Map" }, new { key = GeoMapProvider.Google, name = "Google Dynamic Map" }, new { key = GeoMapProvider.GoogleStatic, name = "Google Static Map" } }) .DisplayExpr("name") .ValueExpr("key") .Value(GeoMapProvider.Bing) .OnValueChanged("selectBoxChooseProvider_onValueChanged") ) </div> <div class="option"> <span>Map Type</span> @(Html.DevExtreme().SelectBox() .ID("choose-type") .DataSource(new[] { new { key = GeoMapType.Roadmap, name = "Default Map" }, new { key = GeoMapType.Satellite, name = "Photographic Map" }, new { key= GeoMapType.Hybrid, name= "Hybrid Map" } }) .DisplayExpr("name") .ValueExpr("key") .Value(GeoMapType.Roadmap) .OnValueChanged("selectBoxChooseType_onValueChanged") ) </div> </div> <script> function selectBoxChooseProvider_onValueChanged(data) { $("#map").dxMap("instance").option("provider", data.value); } function selectBoxChooseType_onValueChanged(data) { $("#map").dxMap("instance").option("type", data.value); } </script>
using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class MapController : Controller { public ActionResult ProvidersAndTypes() { return View(); } } }
.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { display: inline-block; width: 100px; } .option > .dx-selectbox { width: 100%; max-width: 350px; display: inline-block; vertical-align: middle; }