Ignite UI Geographic Map With ASP.NET Core And JavaScript

Almost everywhere web and mobile applications are using map. Use of map is increasing day by day to show the geographic data for a user's convenience. A user can find the locations easily using the map. Representation of location is becoming more common in mobile applications as well as in desktop and web applications. If you are looking forward to using a map in your web application, this articles is for you.

Infragistics is one of the companies that provides JavaScript libraries that are easy to use with the JSON data to render the map in your web application. In this article, I will show how can we configure these JavaScript libraries to represent the data on the map.

What will we cover in this article?

1. Introduction
2. Creating Asp.net Core Empty Project
3. Setup MVC
4. Types of Maps
   1. Open Street
   2. Binding Collection
   3. Scatter Series
   4. Symbol Series
   5. Proportional Symbol Series
   6. Shapes Series
   7. Area Series
   8. Contour Series
   9. Marker Template
   10. Polyline Series
   11. Bing Map

Introduction

Ignite UI for JavaScript map library provides the way to visualize geographic data to your application. It allows rendering the data sets in the form of JSON and other data sources like .shp, dbf, etc consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. This javascript library includes the ability to overlay multiple map layers with geographic data (including data from providers like Bing and Open Street), it allows you to mark specific geographic locations and display information using custom markers and colors.

Creating ASP.NET Core Empty Project

Let’s start the Visual Studio and follow the below steps -

Go to File -> New -> Project -> Choose “Asp.NET Core Web Application”, Set the name of the project and click OK.

Follow the Figure 1. for more details.

Figure 1.

Select the “Empty Project” and click OK. We are using an empty project to demonstrate how to set up MVC in the empty project.

Figure 2.

Now, the project has been created successfully.

Setup MVC

Let’s set up the MVC in the project. Open the solution explorer and right click on the root of the project and add a folder name “Controllers” as shown in Figure 3.

Figure 3.

Add new controller named “HomeController” inside the Controllers folder which will contain all action methods.

Figure 4.

Select the “MVC Controller - Empty” as shown in Figure 5.

Figure 5.

Set the name for the controller HomeController as shown in Figure 6.

Figure 6.

By default, Visual Studio creates an Index action method for our HomeController but it does not create any View for this action method, so let’s create it.

Right-click on the action method and click “Add View” as shown in Figure 7 and 8.

Figure 7.

Figure 8.

In the empty project template, Visual Studio does not add the MVC. We need to add it manually and also, we have to set the root controller with default action method so when we run the application, it self-invokes the default controller and runs the index action method.

To do that, open the startup.cs file and add the highlighted code as shown in Listing 1.

Listing 1.

Now, we have set up the MVC in the empty project template. Let’s build the project and run it in the web browser to see if everything is configured properly.

Add the data file in JSON format

To add the data file shown in Listing 2, right click on the “wwwroot” and add the “Cities.js” file inside it and add the below JSON formatted data to it. This data we will use ass geographic location on the map.

Listing 2.

Add the _Layout.cshtml and _ViewStart.cshtml in the project so we can put all common scripts and CSS in that. See the Figure 9 for more details.

Add the following Infragistics CSS and Scripts file inside the _Layout.cshtml page.

Listing 3.

Also, add the following CSS here “/CSS/StyleSheet.css”.

Listing 4.

Now, add the “Models” folder and add the “WorldCity.cs” model with the following properties.

Listing 5.

Types of Infragistics Maps

There are many types of maps provided by Ignite UI, as given below.

Open Street

Add the action method inside the HomeController for OpenStreets map and add the following code.

Listing 6.

Now, right click on the OpenStreets action method and click add View to add a view for this action method. A View for OpenStreets will get added at the following location in the project “\Views\Home\OpenStreets.cshtml”.

Add the following HTML and script inside the “OpenStreet.cshtml” for the rendering the Open Street map type.

Listing 7.

Also, add the ActionLink on the Index.cshtml page to access the Open Streets View.

Listing 8.

Now, run the application in a web browser and open the page.

Figure 10.

Binding Collection

Add the action method inside the HomeController for BindingCollection Map and add the following code.

Listing 9.

Now, right click on the BindingCollection action method and click add View to add a view for this action method. A View for BindingCollection will get added at the following location in the project “\Views\Home\BindingCollection.cshtml”.

Add the following HTML and script inside the “BindingCollection.cshtml” for rendering the Binding Collection map type.

Listing 10.

Also, add the ActionLink on the Index.cshtml page to access the Binding Collection view.

Listing 11.

Now, run the application in the web browser and open the page.

Figure 11.

Scatter Series

Add the action method inside the Home Controller for ScatterSeries map and add the following code.

Listing 12.

Now right click on the ScatterSeries action method and click add View to add a view for this action method. A View for ScatterSeries will get added at the following location in the project “\Views\Home\ScatterSeries.cshtml”.

Add the following HTML and script inside the “ScatterSeries.cshtml” for the rendering the Scatter Series map type.

Listing 13.

Also, add the ActionLink on the Index.cshtml page to access the Scatter Series view.

Listing 14.

Now, run the application in the web browser and open the page.

Figure 12.

Symbol Series

Add the action method inside the HomeController for SymbolSeries Map and add the following code.

Listing 15.

Now, right click on the SymbolSeries action method and click "Add View" to add a view for this action method. A View for SymbolSeries will get added at the following location in the project “\Views\Home\SymbolSeries.cshtml”.

Add the following HTML and script inside the “SymbolSeries.cshtml” for the rendering the Symbol Series map type.