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.

@(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 DevExtreme.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class VectorMapController : Controller {

        public ActionResult ZoomingAndCentering() {
            return View();
        }

    }
}

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

namespace DevExtreme.MVC.Demos.Models {
    public class VectorMapMarker {
        public double[] Coordinates { get; set; }
        public MarkerAttribute Attributes { get; set; }
    }
}

using System.Collections.Generic;

namespace DevExtreme.MVC.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;
}