Your search did not match any results.
VectorMap

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.
@(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() .Controller("VectorMap") .LoadAction("GetWeatherData") ); }) .LoadingIndicator(li => li.Show(true)) )
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult ImageMarkers() { return View(); } [HttpGet] public ContentResult GetWeatherData() { return Content(JsonConvert.SerializeObject(SampleData.WeatherData), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly object WeatherData = new { type = "FeatureCollection", features = new object[] { 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; width: 100%; display: block; }