Your search did not match any results.

Vector Map - Image Markers

This demo shows how to use markers of the «image» type in the VectorMap. Each marker on the map represents weather forecast for a particular city.

Backend API
@(Html.DevExtreme().VectorMap() .ID("vector-map") .Bounds(new double[] { -118, 52, -80, 20 }) .Layers(layers => { layers.Add() .DataSource(new JS("DevExpress.viz.map.sources.usa")) .BorderColor("#ffffff") .HoverEnabled(false); layers.Add() .Type(VectorMapLayerType.Marker) .ElementType(VectorMapMarkerType.Image) .DataField("url") .Size(51) .Label(l => l .DataField("text") .Font(f => f.Size(14)) ) .DataSource(d => d.Mvc().LoadAction("GetWeatherData")); }) .LoadingIndicator(li => li.Show(true)) )
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult ImageMarkers() { return View(); } [HttpGet] public object GetWeatherData() { return SampleData.WeatherData; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> WeatherData = new[] { new { type = "FeatureCollection", features = new[] { new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -74.007118, 40.71455 } }, properties = new { url = "../../images/VectorMap/Storm.png", text = "New York" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -77.016251, 38.904758 } }, properties = new { url = "../../images/VectorMap/Cloudy.png", text = "Washington" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -81.674782, 30.332251 } }, properties = new { url = "../../images/VectorMap/Storm.png", text = "Jacksonville" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -84.423058, 33.763191 } }, properties = new { url = "../../images/VectorMap/Rain.png", text = "Atlanta" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -97.514839, 35.466179 } }, properties = new { url = "../../images/VectorMap/PartlyCloudy.png", text = "Oklahoma City" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -87.632408, 41.884151 } }, properties = new { url = "../../images/VectorMap/Rain.png", text = "Chicago" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -93.103882, 44.947769 } }, properties = new { url = "../../images/VectorMap/PartlyCloudy.png", text = "St. Paul" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -94.626823, 39.113522 } }, properties = new { url = "../../images/VectorMap/Cloudy.png", text = "Kansas City" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -95.381889, 29.775419 } }, properties = new { url = "../../images/VectorMap/Sunny.png", text = "Houston" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -104.991997, 39.740002 } }, properties = new { url = "../../images/VectorMap/PartlyCloudy.png", text = "Denver" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -116.193413, 43.606979 } }, properties = new { url = "../../images/VectorMap/Sunny.png", text = "Boise" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -118.245003, 34.053501 } }, properties = new { url = "../../images/VectorMap/PartlyCloudy.png", text = "Los Angeles" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -121.886002, 37.3386 } }, properties = new { url = "../../images/VectorMap/PartlyCloudy.png", text = "San Jose" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -123.0252, 44.923199 } }, properties = new { url = "../../images/VectorMap/Sunny.png", text = "Salem" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -122.329437, 47.603561 } }, properties = new { url = "../../images/VectorMap/Sunny.png", text = "Seattle" } } } } }; } }
#vector-map { height: 440px; }