Vector Map - Zooming and Centering

This demo shows the VectorMap zooming and centering capabilities. The map contains several cities represented by dot markers. To identify a city, pause on its marker, and the name of the city will appear in a tooltip. Moreover, if you click the marker, the map will be zoomed and centered on it. In code it is performed by calling the center(centerCoordinates) and zoomFactor(zoomFactor) methods. A click on the «Reset» button restores default center coordinates and zoom factor.

Backend API

@(Html.DevExtreme().VectorMap() .ID("vector-map") .Tooltip(t => t .Enabled(true) .CustomizeTooltip("vectorMap_customizeTooltip") ) .OnClick("vectorMap_onClick") .Bounds(new double[] { -180, 85, 180, -60 }) .Layers(layers => { layers.Add() .DataSource(new JS("DevExpress.viz.map.sources.world")) .HoverEnabled(false); layers.Add() .DataSource(d => d.Mvc().LoadAction("GetMarkersForZoommingAndCentering")) .DataSourceOptions(dso => dso.Map("vectorMap_layer_dataSource_map")); }) ) @(Html.DevExtreme().Button() .ID("reset") .Text("Reset") .OnClick("button_onClick") ) <script> function vectorMap_customizeTooltip(arg) { if(arg.layer.type === "marker") { return { text: arg.attribute("Name") }; } } function vectorMap_onClick(e) { if(e.target && e.target.layer.type === "marker") { e.component.center(e.target.coordinates()).zoomFactor(10); } } function vectorMap_layer_dataSource_map(item) { return { coordinates: item.Coordinates, attributes: item.Attributes }; } function button_onClick() { $("#vector-map").dxVectorMap("instance").center(null).zoomFactor(null); } </script>

using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult ZoomingAndCentering() { return View(); } [HttpGet] public object GetMarkersForZoommingAndCentering() { return SampleData.VectorMapMarkerData; } } }

namespace DevExtreme.NETCore.Demos.Models { public class MarkerAttribute { public string Name { get; set; } } }

using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models { public class VectorMapMarker { public IEnumerable<double> Coordinates { get; set; } public MarkerAttribute Attributes { get; set; } } }

using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<VectorMapMarker> VectorMapMarkerData = new[] { new VectorMapMarker() { Coordinates = new[] { -0.1262, 51.5002 }, Attributes = new MarkerAttribute() { Name = "London" } }, new VectorMapMarker() { Coordinates = new[] { 149.1286, -35.2820 }, Attributes = new MarkerAttribute() { Name = "Canberra" } }, new VectorMapMarker() { Coordinates = new[] { 139.6823, 35.6785 }, Attributes = new MarkerAttribute() { Name = "Tokyo" } }, new VectorMapMarker() { Coordinates = new[] { -77.0241, 38.8921 }, Attributes = new MarkerAttribute() { Name = "Washington" } }, new VectorMapMarker() { Coordinates = new[] { -75.6794, 45.4214 }, Attributes = new MarkerAttribute() { Name = "Ottawa" } }, new VectorMapMarker() { Coordinates = new[] { 37.617778, 55.751667 }, Attributes = new MarkerAttribute() { Name = "Moscow" } }, new VectorMapMarker() { Coordinates = new[] { 116.4, 39.933333 }, Attributes = new MarkerAttribute() { Name = "Beijing" } }, new VectorMapMarker() { Coordinates = new[] { 12.5, 41.9 }, Attributes = new MarkerAttribute() { Name = "Rome" } }, new VectorMapMarker() { Coordinates = new[] { 23.716667, 38 }, Attributes = new MarkerAttribute() { Name = "Athens" } }, new VectorMapMarker() { Coordinates = new[] { 2.333333, 48.833333 }, Attributes = new MarkerAttribute() { Name = "Paris" } }, new VectorMapMarker() { Coordinates = new[] { -3.683333, 40.4 }, Attributes = new MarkerAttribute() { Name = "Madrid" } }, new VectorMapMarker() { Coordinates = new[] { -47.866667, -15.798889 }, Attributes = new MarkerAttribute() { Name = "Brasilia" } } }; } }

#vector-map { height: 420px; } #reset { margin: 10px 2px; }