European ASP.NET Hosting Tutorial – How To Create A Map With Pop Up Info

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

  1. Create ASP.NET MVC 4 Internet application.
  2. Download jvectormap files.
  3. Add “jquery-jvectormap-1.2.2.min.js” in Scripts folder and “jquery-jvectormap-1.2.2.css” files in Content folder.
  4. 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.

Create A Map 1

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.

Step 4 – Add A View

Now, you can add a view without layout and reference jvectormap css:

Here’s the code to load map with markers:

And to display jQuery UI dialog on marker click, add following after onRegionClick:

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

Create A Map 2


Looking for ASP.NET Hosting on European Server? We can help you a lot! 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.