Your search did not match any results.
VectorMap

Dynamic Viewport

Documentation
This demo illustrates how to change the map’s viewport from code. Choose a continent using the drop-down menu under the map. In response to that, the map changes the visible area so that the chosen continent is displayed optimally. This is performed in code by calling the viewport(viewportCoordinates) method. After that, callback functions assigned to the centerChanged and zoomFactorChanged options are triggered. These functions place the current values of the map’s center and zoom factor in the text boxes under the map.
@model List<DevExtreme.NETCore.Demos.Models.ViewportCoordinate> @(Html.DevExtreme().VectorMap() .ID("vector-map") .Layers(l => l.Add().DataSource(new JS("DevExpress.viz.map.sources.world"))) .Bounds(new double[] { -180, 85, 180, -60 }) .OnZoomFactorChanged("vectorMap_onZoomFactorChanged") .OnCenterChanged("vectorMap_onCenterChanged") ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Continent</span> @(Html.DevExtreme().SelectBox() .ID("choose-continent") .DataSource(Model) .Width(210) .DisplayExpr("Continent") .ValueExpr("Coordinates") .Value(Model[0].Coordinates) .OnValueChanged("selectBox_onValueChanged") ) </div> <div class="option"> <span>Zoom factor</span> @(Html.DevExtreme().TextBox() .ID("zoom-factor") .Width(210) .ReadOnly(true) .Value("1.00") ) </div> <div class="option"> <span>Center</span> @(Html.DevExtreme().TextBox() .ID("center") .Width(210) .ReadOnly(true) .Value("0.000, 46.036") ) </div> </div> <script> function vectorMap_onZoomFactorChanged(e) { $("#zoom-factor").dxTextBox("instance").option("value", e.zoomFactor.toFixed(2)); } function vectorMap_onCenterChanged(e) { $("#center").dxTextBox("instance").option("value", e.center[0].toFixed(3) + ", " + e.center[1].toFixed(3)); } function selectBox_onValueChanged(data) { $("#vector-map").dxVectorMap("instance").viewport(data.value); } </script>
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult DynamicViewport() { return View(SampleData.ViewportCoordinateData); } } }
namespace DevExtreme.NETCore.Demos.Models { public class ViewportCoordinate { public string Continent { get; set; } public object Coordinates { get; set; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly List<ViewportCoordinate> ViewportCoordinateData = new List<ViewportCoordinate>() { new ViewportCoordinate() { Continent = "all", Coordinates = "null" }, new ViewportCoordinate() { Continent = "NorthAmerica", Coordinates = new[] { -180, 84.52, -22.11, -1.57 } }, new ViewportCoordinate() { Continent = "SouthAmerica", Coordinates = new[] { -112.47, 14.26, -27.52, -57.44 } }, new ViewportCoordinate() { Continent = "Africa", Coordinates = new[] { -29.34, 39.09, 55.60, -39.00 } }, new ViewportCoordinate() { Continent = "Europe", Coordinates = new[] { -2.35, 70.91, 61.35, 35.84 } }, new ViewportCoordinate() { Continent = "Asia", Coordinates = new[] { 27.62, 83.11, 180, -19.36 } }, new ViewportCoordinate() { Continent = "Australia", Coordinates = new[] { 104.87, -6.61, 149.98, -45.87 } } }; } }
#vector-map { height: 420px; width: 100%; display: block; } .options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { width: 140px; display: inline-block; } .option > .dx-widget { display: inline-block; vertical-align: middle; }