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

​x
 
@(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)))​

xxxxxxxxxx
 
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;        }    }}

xxxxxxxxxx
 
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"                        }                    }                }            }        };    }}​

xxxxxxxxxx
 
#vector-map {    height: 440px;}​