Your search did not match any results.

Image Markers

Documentation

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 DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class VectorMapController : Controller { public ActionResult ImageMarkers() { return View(); } [HttpGet] public ContentResult GetWeatherData() { return Content(JsonConvert.SerializeObject(SampleData.WeatherData), "application/json"); } } }
namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly object WeatherData = new[] { new { type = "FeatureCollection", features = new[] { new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -74.007118, 40.71455 } }, properties = new { url = "../../Content/Images/VectorMap/Storm.png", text = "New York" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -77.016251, 38.904758 } }, properties = new { url = "../../Content/Images/VectorMap/Cloudy.png", text = "Washington" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -81.674782, 30.332251 } }, properties = new { url = "../../Content/Images/VectorMap/Storm.png", text = "Jacksonville" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -84.423058, 33.763191 } }, properties = new { url = "../../Content/Images/VectorMap/Rain.png", text = "Atlanta" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -97.514839, 35.466179 } }, properties = new { url = "../../Content/Images/VectorMap/PartlyCloudy.png", text = "Oklahoma City" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -87.632408, 41.884151 } }, properties = new { url = "../../Content/Images/VectorMap/Rain.png", text = "Chicago" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -93.103882, 44.947769 } }, properties = new { url = "../../Content/Images/VectorMap/PartlyCloudy.png", text = "St. Paul" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -94.626823, 39.113522 } }, properties = new { url = "../../Content/Images/VectorMap/Cloudy.png", text = "Kansas City" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -95.381889, 29.775419 } }, properties = new { url = "../../Content/Images/VectorMap/Sunny.png", text = "Houston" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -104.991997, 39.740002 } }, properties = new { url = "../../Content/Images/VectorMap/PartlyCloudy.png", text = "Denver" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -116.193413, 43.606979 } }, properties = new { url = "../../Content/Images/VectorMap/Sunny.png", text = "Boise" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -118.245003, 34.053501 } }, properties = new { url = "../../Content/Images/VectorMap/PartlyCloudy.png", text = "Los Angeles" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -121.886002, 37.3386 } }, properties = new { url = "../../Content/Images/VectorMap/PartlyCloudy.png", text = "San Jose" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -123.0252, 44.923199 } }, properties = new { url = "../../Content/Images/VectorMap/Sunny.png", text = "Salem" } }, new { type = "Feature", geometry = new { type = "Point", coordinates = new[] { -122.329437, 47.603561 } }, properties = new { url = "../../Content/Images/VectorMap/Sunny.png", text = "Seattle" } } } } }; } }
#vector-map { height: 440px; }