In this tutorial, we will implement to get data from ASP.NET Web API and create map chart with markers using jVectorMap plugin. jQuery UI dialog will be used to display drill-down detail information in a responsive and clean style.
Step 1 – Getting Started
- Create ASP.NET MVC 4 Internet application.
- Download jvectormap files.
- Add “jquery-jvectormap-1.2.2.min.js” in Scripts folder and “jquery-jvectormap-1.2.2.css” files in Content folder.
- We are going to implement USA map, so download jquery-jvectormap-us-aea-en.js and add in Scripts folder.
Step 2 – Database Structure
The data is used from GitHub repository. And use Entity Framework Database first approach. Add “Ado.Net Entity Data Model” in Model folder and select the database and tables.
Step 3 – Setting The Web API
Right Click on Controllers folder > Add > Controller. Enter Name “DataController” > Select Template “API Controller with empty Read/Write Actions”> Add.
We will implement to methods here:
1. To get data to draw chart. This method will return data in the specific format for easy jvectormap integration.
2. To get marker details on a particular marker click.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
public class DataController : ApiController { private dbEntities db = new dbEntities(); // GET api/data public dynamic Get() { var ret = new { states = db.UnemploymentRates.Select(x=> new{ Key = x.StateCode,Value =x.Rate}).ToDictionary(x=>x.Key,x=>x.Value), metro = new { codes = db.Metros.Select(x => x.Codes).ToList(), coords = db.Metros.Select(x => new List<decimal> { x.Latitude, x.Longitude }).ToList(), names = db.Metros.Select(x => x.Name).ToList(), population = db.Metros.Select(x => x.Population).ToList(), unemployment = db.Metros.Select(x => x.Unemployment).ToList() } }; return ret; } // GET api/data/5 public dynamic Get(int index) { return db.Metros.ToList().Where((x,i) => i==index).FirstOrDefault(); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } |
Step 4 – Add A View
Now, you can add a view without layout and reference jvectormap css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/modernizr") <link href="~/Content/jquery-jvectormap-1.2.2.css" rel="stylesheet" /> Add div for map: ? <section class="featured"> <div class="map" style="width: 800px; height: 600px;margin:0 auto"></div> </section> Add script references: ? @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") <script src="~/Scripts/jquery-jvectormap-1.2.2.min.js"></script> <script src="~/Scripts/jquery-jvectormap-us-aea-en.js"></script> You can create a bundle for jvectormap and add the bundle also. Now, next step is to use jQuery ajax to get data. ? var data = {}; $.ajax({ url: 'api/data', type: 'GET', async: false, dataType: 'json' }).done(function (result) { data = result; }) |
Here’s the code to load map with markers:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var statesValues = Array.prototype.concat.apply([], jvm.values(data.states)), metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)), metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment)); $('.map').vectorMap({ map: 'us_aea_en', markers: data.metro.coords, series: { markers: [{ attribute: 'fill', scale: ['#FEE5D9', '#A50F15'], values: data.metro.unemployment, min: jvm.min(metroUnemplValues), max: jvm.max(metroUnemplValues) }, { attribute: 'r', scale: [5, 20], values: data.metro.population, min: jvm.min(metroPopValues), max: jvm.max(metroPopValues) }], regions: [{ scale: ['#DEEBF7', '#08519C'], attribute: 'fill', values: data.states, min: jvm.min(statesValues), max: jvm.max(statesValues) }] }, onMarkerLabelShow: function (event, label, index) { label.html( '<b>' + data.metro.names[index] + '</b><br/>' + 'Population: ' + data.metro.population[index] + '<br/>' + 'Unemployment rate: ' + data.metro.unemployment[index] + '%' ); }, onRegionLabelShow: function (event, label, code) { label.html( '<b>' + label.html() + '</b><br/>' + 'Unemployment rate: ' + data.states1 + '%' ); }, onRegionClick: function (element, code, region) { var message = ' Code: ' + code.toUpperCase(); alert(message); } }); var mapObject = $('.map').vectorMap('get', 'mapObject'); |
And to display jQuery UI dialog on marker click, add following after onRegionClick:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
onMarkerClick: function (e, code) { //To create a sample for ajax call $.ajax({ url: 'api/data', type: 'GET', async: false, dataType: 'json', data: { 'index': code } }) .done(function (result) { var dialogDiv = $('<div id="MenuDialog">\ <p><b>Code:</b> '+ result.Codes + ' </p>\ <p><b>Name:</b> ' + result.Name + ' </p>\ <p><b>Latitude:</b> ' + result.Latitude + ' </p>\ <p><b>Longitude:</b> ' + result.Longitude + ' </p>\ <p><b>Population:</b> ' + result.Population + ' </p>\ <p><b>Unemployment:</b> ' + result.Unemployment + '% </p>\ </div>'); dialogDiv.dialog({ modal: true, title: "Details", show: 'clip', hide: 'clip' }); }) .fail(function () { alert('problem to load data'); }); } |
On marker click, ajax request is made to get data related to marker and jquery ui dialog is displayed with data.
Here’s The Output
Looking for ASP.NET Hosting on European Server? We can help you a lot!
hostforlifeasp.net is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
