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().LoadAction("GetWeatherData"));
})
.LoadingIndicator(li => li.Show(true))
)
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 ImageMarkers() {
return View();
}
}
}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;
}