Post
Ask Question

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.

ASP.NET Core
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. 

ASP.NET Core
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.

ASP.NET Core
Figure 3.

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

ASP.NET Core
Figure 4.

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

ASP.NET Core
Figure 5.

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

ASP.NET Core
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.

ASP.NET Core
Figure 7.

ASP.NET Core
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.

  1. public class Startup  
  2. {  
  3.         public void ConfigureServices(IServiceCollection services)  
  4.         {  
  5.             services.AddMvc();  
  6.         }  
  7.   
  8.         public void Configure(IApplicationBuilder app, IHostingEnvironment env)  
  9.         {  
  10.             app.UseStaticFiles();  
  11.   
  12.             app.UseMvc(routes =>  
  13.             {  
  14.                 routes.MapRoute(  
  15.                     name: "default",  
  16.                     template: "{controller=Home}/{action=Index}/{id?}");  
  17.             });  
  18.         }  
  19. }  

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.

  1. var data = [  
  2.       
  3.     {  
  4.         "Name": "Warsaw",  
  5.         "Country": "Poland",  
  6.         "Latitude": 52.21,  
  7.         "Longitude": 21  
  8.     },  
  9.     {  
  10.         "Name": "London",  
  11.         "Country": "England",  
  12.         "Latitude": 51.50,  
  13.         "Longitude": 0.12  
  14.     },  
  15.     {  
  16.         "Name": "Berlin",  
  17.         "Country": "Germany",  
  18.         "Latitude": 52.50,  
  19.         "Longitude": 13.33  
  20.     },  
  21.     {  
  22.         "Name": "Moscow",  
  23.         "Country": "Russia",  
  24.         "Latitude": 55.75,  
  25.         "Longitude": 37.51  
  26.     },  
  27.     {  
  28.         "Name": "Sydney",  
  29.         "Country": "Australia",  
  30.         "Latitude": -33.83,  
  31.         "Longitude": 151.2  
  32.     },  
  33.     {  
  34.         "Name": "Tokyo",  
  35.         "Country": "Japan",  
  36.         "Latitude": 35.6895,  
  37.         "Longitude": 139.6917  
  38.     },  
  39.     {  
  40.         "Name": "Seoul",  
  41.         "Country": "South Korea",  
  42.         "Latitude": 37.5665,  
  43.         "Longitude": 126.9780  
  44.     },  
  45.     {  
  46.         "Name": "Delhi",  
  47.         "Country": "India",  
  48.         "Latitude": 28.6353,  
  49.         "Longitude": 77.2250  
  50.     },  
  51.     {  
  52.         "Name": "Mumbai",  
  53.         "Country": "India",  
  54.         "Latitude": 19.0177,  
  55.         "Longitude": 72.8562  
  56.     },  
  57.     {  
  58.         "Name": "Manila",  
  59.         "Country": "Philippines",  
  60.         "Latitude": 14.6010,  
  61.         "Longitude": 120.9762  
  62.     },  
  63.     {  
  64.         "Name": "Shanghai",  
  65.         "Country": "China",  
  66.         "Latitude": 31.2244,  
  67.         "Longitude": 121.4759  
  68.     },  
  69.     {  
  70.         "Name": "Mexico City",  
  71.         "Country": "Mexico",  
  72.         "Latitude": 19.4270,  
  73.         "Longitude": -99.1276  
  74.     },  
  75.     {  
  76.         "Name": "New York",  
  77.         "Country": "United States",  
  78.         "Latitude": 40.7561,  
  79.         "Longitude": -73.9870  
  80.     },  
  81.     {  
  82.         "Name": "Sao Paulo",  
  83.         "Country": "Brasil",  
  84.         "Latitude": -23.5489,  
  85.         "Longitude": -46.6388  
  86.     },  
  87.     {  
  88.         "Name": "Los Angeles",  
  89.         "Country": "United States",  
  90.         "Latitude": 34.0522,  
  91.         "Longitude": -118.2434  
  92.     },  
  93.     {  
  94.         "Name": "Sofia",  
  95.         "Country": "Bulgaria",  
  96.         "Latitude": 42.697845,  
  97.         "Longitude": 23.321925  
  98.     }  
  99. ];  

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.

ASP.NET Core
Figure 9.

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  6.     <title>@ViewData["Title"] - Ignite-UI-Maps</title>  
  7.     <!-- Ignite UI Required Combined CSS Files -->  
  8.     <link href="https://www.igniteui.com/igniteui/css/themes/infragistics/infragistics.theme.css"        rel="stylesheet" />  
  9.     <link href="https://www.igniteui.com/igniteui/css/structure/infragistics.css" rel="stylesheet" />  
  10.     <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>  
  11.     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>  
  12.     <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>  
  13.   
  14.     <!-- Ignite UI Required Combined JavaScript Files -->  
  15.     <script  src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>  
  16.     <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>  
  17.     <link href="~/CSS/StyleSheet.css" rel="stylesheet" />  
  18.       
  19. <!-- Used to add markup and provide logging  
  20.     functionality for the API Explorer and API Viewer UI -->  
  21.     <script src="https://www.igniteui.com/js/apiviewer.js"></script>  
  22.     <script id="tooltipTemplate" type="text/x-jquery-tmpl">  
  23.         <table id="tooltipTable">  
  24.             <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>  
  25.             <tr>  
  26.                 <td>Latitude:</td>  
  27.                 <td>${item.Latitude}</td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>Longitude:</td>  
  31.                 <td>${item.Longitude}</td>  
  32.             </tr>  
  33.         </table>  
  34.     </script>  
  35. </head>  
  36. <body>  
  37.     <div class="container body-content">  
  38.         @RenderBody()  
  39.         <hr />  
  40.         <footer>  
  41.             <p>© @DateTime.Now.Year.ToString() - Ignite-UI-Maps</p>  
  42.         </footer>  
  43.     </div>  
  44. </body>  
  45. </html>  

Listing 3.

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

  1. #tooltipTable {  
  2.     font-family: Verdana, Arial, Helvetica, sans-serif;  
  3.     width: 100%;  
  4.     border-collapse: collapse;  
  5. }  
  6.  
  7.     #tooltipTable td, #tooltipTable th {  
  8.         font-size: 9px;  
  9.         border: 1px solid #b51c1c;  
  10.         padding: 3px 7px 2px 7px;  
  11.     }  
  12.  
  13.     #tooltipTable th {  
  14.         font-weight: bold;  
  15.         font-size: 11px;  
  16.         text-align: left;  
  17.         padding-top: 5px;  
  18.         padding-bottom: 4px;  
  19.         background-color: #b51c1c;  
  20.         color: #ffffff;  
  21.     }  

Listing 4.

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

  1. public class WorldCity  
  2. {  
  3.     public string Name { get; set; }  
  4.     public string Country { get; set; }  
  5.     public double Latitude { get; set; }  
  6.     public double Longitude { get; set; }  
  7. }   

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.

  1. public IActionResult OpenStreets()  
  2. {  
  3.     return View();  
  4. }  

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.

  1. <!-- Target element for the map -->  
  2. <div id="map"></div>  
  3. <script src="~/Cities.js"></script>  
  4. <script>  
  5.     $(function () {  
  6.         $("#map").igMap({  
  7.             width: "700px",  
  8.             height: "500px",  
  9.             windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },  
  10.             // specifies imagery tiles from OpenStreetMap  
  11.             backgroundContent: {  
  12.                 type: "openStreet"  
  13.             },  
  14.             series: [{  
  15.                 type: "geographicSymbol",  
  16.                 name: "worldCities",  
  17.                 dataSource: data,  
  18.                 latitudeMemberPath: "Latitude",  
  19.                 longitudeMemberPath: "Longitude",  
  20.                 markerType: "automatic",  
  21.                 markerCollisionAvoidance: "fade",  
  22.                 markerOutline: "#b51c1c",  
  23.                 markerBrush: "#b51c1c",  
  24.                 showTooltip: true,  
  25.                 tooltipTemplate: "tooltipTemplate"  
  26.             }]  
  27.         });  
  28.         $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>")  
  29.     });  
  30.   
  31. </script>  

Listing 7.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4. <h2>Types of Maps</h2>  
  5. <ul>  
  6.     <li>  
  7.         <a href="@Url.Action("OpenStreets", "Home")">  
  8.             Open Streets  
  9.         </a>  
  10. </li>  
  11. </ul>  

Listing 8.

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

ASP.NET Core
Figure 10.

Binding Collection

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

  1. public IActionResult BindingCollection()  
  2. {  
  3.      //  Get the content of the world-cities.js file and extract the array data only  
  4.      //  excluding the opening variable declaration  
  5.   
  6.      var jsFileName = Path.Combine(env.WebRootPath, "Cities.js");  
  7.      var jsFileContent = System.IO.File.ReadAllText(jsFileName);  
  8.      var openingBracePos = jsFileContent.IndexOf('[');  
  9.      var closingBracePos = jsFileContent.IndexOf(']');  
  10.      var jsonContent = jsFileContent.Substring(openingBracePos, closingBracePos -                               openingBracePos + 1);  
  11.   
  12.      //  De-serialize WorldCities data from a JavaScript array into List<WorldCity>  
  13.      var wordlCities =      Newtonsoft.Json.JsonConvert.DeserializeObject<List<WorldCity>>(jsonContent);  
  14.      return View("BindingCollection", wordlCities.AsQueryable());  
  15. }  

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.

  1. @using Infragistics.Web.Mvc;  
  2. @model IQueryable<Ignite_UI_Map_Demo.Models.WorldCity>  
  3.   
  4. <div>  
  5.     @(Html.Infragistics().Map<Ignite_UI_Map_Demo.Models.WorldCity>(Model)  
  6.   
  7.       .ID("map")  
  8.       .Width("700px")  
  9.       .Height("500px")  
  10.       .OverviewPlusDetailPaneVisibility(Visibility.Visible)  
  11.       .OverviewPlusDetailPaneBackgroundImageUri(Url.Content("~/images/samples/maps/World.png"))  
  12.       .BackgroundContent(bgr => bgr.OpenStreetMaps())  
  13.       .PanModifier(ModifierKeys.Control)  
  14.       .Series(series =>  
  15.       {  
  16.           series.GeographicSymbol("worldCities")  
  17.               .LatitudeMemberPath(item => item.Latitude)  
  18.               .LongitudeMemberPath(item => item.Longitude)  
  19.               .MarkerType(MarkerType.Automatic)  
  20.               .MarkerCollisionAvoidance(CollisionAvoidanceType.Fade)  
  21.                                .MarkerBrush("#1B559D")  
  22.                                .MarkerOutline("black")  
  23.                                .ShowTooltip(true).TooltipTemplate("tooltipTemplate");  
  24.                                             })  
  25.                                             .WindowRect(0.1, 0.1, 0.7, 0.7)  
  26.                                             .DataBind()  
  27.                                             .Render()  
  28.     )  
  29. </div>  
  30. <script type="text/javascript">  
  31.     $(function () {  
  32.         $("#map").find(".ui-widget-content")  
  33. .append("<span class='copyright-notice'><a href='http://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  34.     });  
  35. </script>  

Listing 10.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6.   
  7. <ul>  
  8.     <li>  
  9.         <a href="@Url.Action("BindingCollection", "Home")">  
  10.             Binding Collection  
  11.         </a>  
  12. </li>  
  13. </ul>  

Listing 11.

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

ASP.NET Core
Figure 11.

Scatter Series

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

  1. public IActionResult ScatterSeries()  
  2. {  
  3.         return View();  
  4. }  

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.

  1. @{  
  2.     ViewData["Title"] = "ScatterSeries";  
  3. }  
  4.   
  5. <style type="text/css">  
  6.     .sliderBounds {  
  7.         width: 95px;  
  8.         margin: 6px 3px 6px 6px;  
  9.         display: inline-block;  
  10.     }  
  11.   
  12.     .optionContainer {  
  13.         width: 200px;  
  14.         margin: 2px;  
  15.         padding: 2px;  
  16.         display: inline-block;  
  17.         border: 1px solid #e0e0e0;  
  18.         -moz-border-radius: 4px;  
  19.         -webkit-border-radius: 4px;  
  20.         border-radius: 4px;  
  21.     }  
  22.   
  23.     .selectBounds {  
  24.         min-width: 120px;  
  25.         max-width: 132px;  
  26.     }  
  27. </style>  
  28. <h2>Scatter Series</h2>  
  29.   
  30. <script src="https://www.igniteui.com/data-files/high-density-data.js"></script>  
  31.   
  32. <script id="cityTemplate" type="text/x-jquery-tmpl">  
  33.     <table>  
  34.         <tr><td class="tooltipHeading" colspan="2">${item.name}</td></tr>  
  35.     </table>  
  36. </script>  
  37.   
  38. <style type="text/css">  
  39.     .sliderBounds {  
  40.         width: 95px;  
  41.         margin: 6px 3px 6px 6px;  
  42.         display: inline-block;  
  43.     }  
  44.     .optionContainer {  
  45.         width: 200px;  
  46.         margin: 2px;  
  47.         padding: 2px;  
  48.         display: inline-block;  
  49.         border: 1px solid #e0e0e0;  
  50.         -moz-border-radius: 4px;  
  51.         -webkit-border-radius: 4px;  
  52.         border-radius: 4px;  
  53.     }  
  54.     .selectBounds {  
  55.         min-width: 120px;  
  56.         max-width: 132px;  
  57. }  
  58. </style>  
  59. <div id="map"></div>  
  60. <br />  
  61. <div>  
  62.     <fieldset id="chartOptions">  
  63.         <legend>Map Options</legend>  
  64.         <br />  
  65.         <div class="optionContainer">  
  66.             Resolution  
  67.             <br />  
  68.             <div id="resolutionSlider" class="sliderBounds"></div>  
  69.             <label id="resolutionLabel">0</label>  
  70.         </div>  
  71.         <div class="optionContainer">  
  72.             Minimum Heat Value  
  73.             <br />  
  74.             <div id="minimumHeatValueSlider" class="sliderBounds"></div>  
  75.             <label id="minimumHeatValueLabel">0</label>  
  76.         </div>  
  77.         <div class="optionContainer">  
  78.             Maximum Heat Value  
  79.             <br />  
  80.             <div id="maximumHeatValueSlider" class="sliderBounds"></div>  
  81.             <label id="maximumHeatValueLabel">5</label>  
  82.         </div>  
  83.         <br />  
  84.         <div class="optionContainer">  
  85.             Point Extent  
  86.             <br />  
  87.             <div id="pointExtentSlider" class="sliderBounds"></div>  
  88.             <label id="pointExtentLabel">1</label>  
  89.         </div>  
  90.         <div class="optionContainer">  
  91.             Minimum Heat Color  
  92.             <br />  
  93.             <select id="minimumHeatColorDropDown" class="selectBounds">  
  94.                 <option value="red">Red</option>  
  95.                 <option value="blue">Blue</option>  
  96.                 <option value="green">Green</option>  
  97.                 <option value="yellow">Yellow</option>  
  98.                 <option value="black" selected="selected">Black</option>  
  99.             </select>  
  100.         </div>  
  101.         <div class="optionContainer">  
  102.             Maximum Heat Color  
  103.             <br />  
  104.             <select id="maximumHeatColorDropDown" class="selectBounds">  
  105.                 <option value="red" selected="selected">Red</option>  
  106.                 <option value="blue">Blue</option>  
  107.                 <option value="green">Green</option>  
  108.                 <option value="yellow">Yellow</option>  
  109.                 <option value="black">Black</option>  
  110.             </select>  
  111.         </div>  
  112.         <br />  
  113.         <div class="optionContainer">  
  114.             <input type="checkbox" id="enableMouseOverCheckBox" checked="checked" />Enable Mouse Over<br />  
  115.         </div>  
  116.         <div class="optionContainer">  
  117.             <input type="checkbox" id="useBruteForceCheckBox" />Use Brute Force<br />  
  118.         </div>  
  119.   
  120.     </fieldset>  
  121. </div>  
  122. <br />  
  123.   
  124. <script type="text/javascript">  
  125.     $(function () {  
  126.         $("#map").igMap({  
  127.             width: "700px",  
  128.             height: "500px",  
  129.             backgroundContent: {  
  130.                 type: "openStreet"  
  131.             },  
  132.             series: [{  
  133.                 type: "geographicHighDensityScatter",  
  134.                 name: "australiaMap",  
  135.                 dataSource: placeData,  
  136.                 latitudeMemberPath: "lat",  
  137.                 longitudeMemberPath: "lon",  
  138.                 heatMinimum: 0,  
  139.                 heatMaximum: 5,  
  140.                 mouseOverEnabled: true,  
  141.                 showTooltip: true,  
  142.                 tooltipTemplate: "cityTemplate"  
  143.             }],  
  144.             windowRect: {  
  145.                 left: 0.7,  
  146.                 top: 0.52,  
  147.                 width: 0.127,  
  148.                 height: 0.127  
  149.             }  
  150.         });  
  151.         $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  152.         // Resolution  
  153.         $("#resolutionSlider").slider({  
  154.             min: 0,  
  155.             max: 10,  
  156.             value: 0,  
  157.             slide: function (event, ui) {  
  158.                 $("#map").igMap("option", "series", [{ name: "australiaMap", resolution: ui.value }]);  
  159.                 $("#resolutionLabel").text(ui.value);  
  160.             }  
  161.         });  
  162.   
  163.         // Minimum Heat Value  
  164.         $("#minimumHeatValueSlider").slider({  
  165.             min: 0,  
  166.             max: 5,  
  167.             value: 0,  
  168.             slide: function (event, ui) {  
  169.                 $("#map").igMap("option", "series", [{ name: "australiaMap", heatMinimum:                   ui.value }]);  
  170.                 $("#minimumHeatValueLabel").text(ui.value);  
  171.             }  
  172.         });  
  173.   
  174.         // Maximum Heat Value  
  175.         $("#maximumHeatValueSlider").slider({  
  176.             min: 5,  
  177.             max: 10,  
  178.             value: 10,  
  179.             slide: function (event, ui) {  
  180.                 $("#map").igMap("option", "series", [{ name: "australiaMap", heatMaximum:                   ui.value }]);  
  181.                 $("#maximumHeatValueLabel").text(ui.value);  
  182.             }  
  183.         });  
  184.   
  185.         // Heat Minimum Color  
  186.         $("#minimumHeatColorDropDown").on({  
  187.             change: function (e) {  
  188.                 var minColor = $(this).val();  
  189.                 $("#map").igMap("option", "series", [{ name: "australiaMap", heatMinimumColor:              minColor }]);  
  190.             }  
  191.         });  
  192.   
  193.         // Heat Maximum Color  
  194.         $("#maximumHeatColorDropDown").on({  
  195.             change: function (e) {  
  196.                 var maxColor = $(this).val();  
  197.                 $("#map").igMap("option", "series", [{ name: "australiaMap", heatMaximumColor:              maxColor }]);  
  198.             }  
  199.         });  
  200.         // Point Extent  
  201.         $("#pointExtentSlider").slider({  
  202.             min: 1,  
  203.             max: 5,  
  204.             value: 1,  
  205.             slide: function (event, ui) {  
  206.                 $("#map").igMap("option", "series", [{ name: "australiaMap", pointExtent:                   ui.value }]);  
  207.                 $("#pointExtentLabel").text(ui.value);  
  208.             }  
  209.         });  
  210.   
  211.   
  212.         // Enable Mouse Over  
  213.         $("#enableMouseOverCheckBox").click(function (e) {  
  214.             var enableMouseOverSeries = $("#enableMouseOverCheckBox").is(":checked") ? true :           false;  
  215.             $("#map").igMap("option", "series", [{ name: "australiaMap", mouseOverEnabled:              enableMouseOverSeries }]);  
  216.         });  
  217.   
  218.         // Use Brute Force  
  219.         $("#useBruteForceCheckBox").click(function (e) {  
  220.             var useBruteForceSeries = $("#useBruteForceCheckBox").is(":checked") ? true : false;  
  221.             $("#map").igMap("option", "series", [{ name: "australiaMap", useBruteForce:                     useBruteForceSeries }]);  
  222.         });  
  223.   
  224.     });  
  225. </script>   

Listing 13.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4. <h2>Types of Maps</h2>  
  5. <ul>  
  6.     <li>  
  7.         <a href="@Url.Action("ScatterSeries", "Home")">  
  8.             Scatter Series  
  9.         </a>  
  10. </li>  
  11. </ul>  

Listing 14.

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

ASP.NET Core
Figure 12.

Symbol Series

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

  1. public IActionResult SymbolSeries()  
  2. {  
  3.         return View();  
  4. }  

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.

  1. @{  
  2.     ViewData["Title"] = "SymbolSeries";  
  3. }  
  4.   
  5. <script src="https://www.igniteui.com/js/map-helper.js" type="text/javascript"></script>  
  6. <style>  
  7.     #tooltipTable {  
  8.         font-family: Verdana, Arial, Helvetica, sans-serif;  
  9.         width: 100%;  
  10.         border-collapse: collapse;  
  11.     }  
  12.     #tooltipTable td, #tooltipTable th {  
  13.          font-size: 9px;  
  14.          border: 1px solid #5da7df;  
  15.          padding: 3px 7px 2px 7px;  
  16.     }  
  17.     #tooltipTable th {  
  18.          font-weight: bold;  
  19.          font-size: 11px;  
  20.          text-align: left;  
  21.          padding-top: 5px;  
  22.          padding-bottom: 4px;  
  23.          background-color: #5da7df;  
  24.          color: #ffffff;  
  25.     }  
  26. </style>  
  27. <script id="geoSymbolTooltip" type="text/x-jquery-tmpl">  
  28.     <table id="tooltipTable">  
  29.         <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>  
  30.         <tr>  
  31.             <td>Population:</td>  
  32.             <td>${item.Population}</td>  
  33.         </tr>  
  34.     </table>  
  35. </script>  
  36.   
  37.   
  38. <h2>Symbol Series</h2>  
  39. <script type="text/javascript">  
  40.     $(function () {  
  41.         // load geo-locations from shapefile and simplify data structure  
  42.         var worldCities = [];  
  43.         var points = [];  
  44.         var shapeDataSource = new $.ig.ShapeDataSource({  
  45.             shapefileSource: "https://www.igniteui.com/data-files/shapes/world_cities.shp",  
  46.             databaseSource: "https://www.igniteui.com/data-files/shapes/world_cities.dbf",  
  47.             transformRecord: function (rec) {  
  48.                 var pointX = rec.points.item(0).item(0).x();  
  49.                 var pointY = rec.points.item(0).item(0).y();  
  50.                 var city = rec.fields.item("NAME");  
  51.                 var country = rec.fields.item("COUNTRY");  
  52.                 var population = rec.fields.item("POPULATION");  
  53.                 if (population > 7000) {  
  54.                     points.push({  
  55.                         Latitude: pointY, Longitude: pointX,  
  56.                         City: city, Country: country,  
  57.                         Population: population  
  58.                     });  
  59.                 }  
  60.             },  
  61.             callback: function () {  
  62.                 worldCities = points.sort(compareCities);;  
  63.                 createMap();  
  64.             }  
  65.         });  
  66.         shapeDataSource.dataBind();  
  67.   
  68.         function compareCities(a, b) {  
  69.             if (a.Population > b.Population)  
  70.                 return -1;  
  71.             if (a.Population < b.Population)  
  72.                 return 1;  
  73.             return 0;  
  74.         }  
  75.   
  76.         function createMap() {  
  77.   
  78.             $("#map").igMap({  
  79.                 width: "700px",  
  80.                 height: "500px",  
  81.                 windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },  
  82.                 overviewPlusDetailPaneVisibility: "visible",  
  83.                 overviewPlusDetailPaneBackgroundImageUri:                   "https://www.igniteui.com/images/samples/maps/world.png",  
  84.                 backgroundContent: {  
  85.                     type: "openStreet"  
  86.                 },  
  87.                 series: [{  
  88.                     type: "geographicSymbol",  
  89.                     name: "worldCities",  
  90.                     dataSource: worldCities,  
  91.                     longitudeMemberPath: "Longitude",  
  92.                     latitudeMemberPath: "Latitude",  
  93.                     showTooltip: true,  
  94.                     tooltipTemplate: "geoSymbolTooltip",  
  95.                     // using custom template  
  96.                     markerType: "none",  
  97.                     markerTemplate: {  
  98.                         measure: function (measureInfo) {  
  99.                             measureInfo.width = 10;  
  100.                             measureInfo.height = 10;  
  101.                         },  
  102.                         render: function (renderInfo) {  
  103.   
  104.                             var ctx = renderInfo.context;  
  105.                             var x = renderInfo.xPosition;  
  106.                             var y = renderInfo.yPosition;  
  107.                             if (renderInfo.isHitTestRender)  
  108.                                 ctx.fillStyle = renderInfo.data.actualItemBrush().fill();  
  109.                             else  
  110.                                 ctx.fillStyle = "black";  
  111.   
  112.                             var size = 10;  
  113.                             var heightHalf = size / 2.0;  
  114.                             var widthHalf = size / 2.0;  
  115.   
  116.                             if (renderInfo.isHitTestRender) {  
  117.                                 ctx.fillRect(x - widthHalf, y - heightHalf, size, size);  
  118.                             } else {  
  119.   
  120.                                 // color markers based on population of cities  
  121.                                 var pop = renderInfo.data.item()["Population"];  
  122.                                 if (pop > 0)  
  123.                                     ctx.fillStyle = "rgba(120,120,120,0.8)";  
  124.                                 if (pop > 100000)  
  125.                                     ctx.fillStyle = "rgba(160,200,20,0.8)";  
  126.                                 if (pop > 1000000)  
  127.                                     ctx.fillStyle = "rgba(210,155,20,0.8)";  
  128.                                 if (pop > 5000000)  
  129.                                     ctx.fillStyle = "rgba(210,60,20,0.8)";  
  130.                                 if (pop > 10000000)  
  131.                                     ctx.fillStyle = "rgba(155,20,20,0.8)";  
  132.   
  133.                                 size = 3;  
  134.                                 ctx.globalAlpha = 1;  
  135.                                 ctx.strokeStyle = "rgba(20,20,20,0.36)";  
  136.                                 ctx.beginPath();  
  137.                                 ctx.arc(x, y, size, 0, 2.0 * Math.PI);  
  138.                                 ctx.fill();  
  139.                                 ctx.stroke();  
  140.                             }  
  141.                         }  
  142.                     }  
  143.                 }]  
  144.             });  
  145.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  146.         };  
  147.   
  148.     });  
  149.   
  150. </script>  
  151.   
  152. <div>  
  153.     <div id="map"></div>  
  154. </div>  

Listing 16.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4. <h2>Types of Maps</h2>  
  5. <ul>  
  6.     <li>  
  7.         <a href="@Url.Action("SymbolSeries", "Home")">  
  8.             Symbol Series  
  9.         </a>  
  10. </li>  
  11. </ul> 

Listing 17.

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

ASP.NET Core
Figure 13.

Proportional Symbol Series

Add the action method in side the HomeController for ProportionalSymbolSeries map and add the following code,

  1. public IActionResult ProportionalSymbolSeries()  
  2.  {  
  3.          return View();  
  4.  }  

Listing 18.

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

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

  1. @{  
  2.     ViewData["Title"] = "ProportionalSymbolSeries";  
  3. }  
  4.   
  5. <script id="geoSymbolTooltip" type="text/x-jquery-tmpl">  
  6.     <table id="tooltipTable">  
  7.         <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>  
  8.         <tr>  
  9.             <td>Population:</td>  
  10.             <td>${item.Population}</td>  
  11.         </tr>  
  12.     </table>  
  13. </script>  
  14.   
  15. <h2>Proportional Symbol Series</h2>  
  16.   
  17. <script type="text/javascript">  
  18. $(function () {  
  19.   
  20.         function CreateEarthquakes(count) {  
  21.         count = count || 50;  
  22.         var data = [];  
  23.             for (i = 0; i < count; i++)  
  24.             {  
  25.                 var x = Math.floor((Math.random() * 360) - 180);  
  26.                 var y = Math.floor((Math.random() * 180) - 90);  
  27.                 var m = Math.floor((Math.random() * 10) + 1);  
  28.                 var point = { "Magnitude": m, "Longitude": x, "Latitude": y };  
  29.                 data.push(point);  
  30.             }  
  31.             return data;  
  32.         }  
  33.         var data = CreateEarthquakes(100);  
  34.   
  35.         function createMap() {  
  36.   
  37.             $("#map").igMap({  
  38.                 width: "700px",  
  39.                 height: "500px",  
  40.   
  41.                 series: [{  
  42.                     name: "series1",  
  43.                     type: "geographicProportionalSymbol",  
  44.                     dataSource: data,  
  45.                     markerType: "circle",  
  46.                     markerOutline: "black",  
  47.                     longitudeMemberPath: "Longitude",  
  48.                     latitudeMemberPath: "Latitude",  
  49.                     radiusMemberPath: "Magnitude",  
  50.                     radiusScale: {  
  51.                         minimumValue: 10,  
  52.                         maximumValue: 40,  
  53.                     },  
  54.                     fillMemberPath: "Magnitude",  
  55.                     fillScale: {  
  56.                          type: "value",  
  57.                          brushes: ["red", "yellow"],  
  58.                          minimumValue: 1,  
  59.                          maximumValue: 12,  
  60.                      }  
  61.                 },  
  62.                 ]  
  63.             });  
  64.         };  
  65.         createMap();  
  66.     });  
  67. </script>  
  68. <div>  
  69.     <div id="map"></div>  
  70. </div>  

Listing 19.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6. <ul>  
  7.     <li>  
  8.         <a href="@Url.Action("ProportionalSymbolSeries", "Home")">  
  9.             Proportional Symbol Series  
  10.         </a>  
  11. </li>  
  12. </ul>  

Listing 20.

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

ASP.NET Core
Figure 14.

Shapes Series

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

  1. public IActionResult ShapesSeries()  
  2. {  
  3.      return View();  
  4. }  

Listing 21.

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

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

  1. @{  
  2.     ViewData["Title"] = "ShapesSeries";  
  3. }  
  4.   
  5. <h2>Shapes Series</h2>  
  6.   
  7. <style>  
  8.     #tooltipTable {  
  9.         font-family: Verdana, Arial, Helvetica, sans-serif;  
  10.         width: 100%;  
  11.         border-collapse: collapse;  
  12.     }  
  13.  
  14.         #tooltipTable td, #tooltipTable th {  
  15.             font-size: 9px;  
  16.             border: 1px solid #2d87cb;  
  17.             padding: 3px 7px 2px 7px;  
  18.         }  
  19.         #tooltipTable th {  
  20.             font-weight: bold;  
  21.             font-size: 11px;  
  22.             text-align: left;  
  23.             padding-top: 5px;  
  24.             padding-bottom: 4px;  
  25.             background-color: #2d87cb;  
  26.             color: #ffffff;  
  27.         }  
  28. </style>  
  29.   
  30. <script id="geoShapeTooltip" type="text/x-jquery-tmpl">  
  31.     <table id="tooltipTable">  
  32.         <tr>  
  33.             <th class="tooltipHeading" colspan="2">  
  34.                 ${item.fieldValues.NAME}, ${item.fieldValues.REGION}  
  35.             </th>  
  36.         </tr>  
  37.         <tr>  
  38.             <td>Population:</td>  
  39.             <td>${item.fieldValues.POP2005}</td>  
  40.         </tr>  
  41.     </table>  
  42. </script>  
  43.   
  44. <script type="text/javascript" src="https://www.igniteui.com/js/map-helper.js"></script>  
  45. <script type="text/javascript">  
  46.          function ColorPickerByIndex(min, max) {  
  47.              //  Initialize internal state  
  48.              var brushes = ["#d9c616", "#d96f17", "#d1150c"];  
  49.              var interval = (max - min) / (brushes.length - 1);  
  50.              //  Returns a color from the brushes array depending on the input value  
  51.              this.getColorByIndex = function(val) {  
  52.                  var index = Math.round(val / interval);  
  53.                  if (index < 0) {  
  54.                      index = 0;  
  55.                  } else if (index > (brushes.length - 1)) {  
  56.                      index = brushes.length - 1;  
  57.                  }  
  58.                  return brushes[index];  
  59.              };  
  60.          }  
  61.   
  62.          $(function () {  
  63.   
  64.              var colorPicker = new ColorPickerByIndex(100000, 500000000);  
  65.   
  66.              //  alternative functions for generating color based on a data value  
  67.              var getColorValue = function (val) {  
  68.                  var ratio = val / 1338299500.0;  
  69.                  var col = 255.0 * ratio;  
  70.                  var colString = "rgba(0,50," + Math.round(col) + ",0.45)";  
  71.                  return colString;  
  72.              };  
  73.              var getLogColorValue = function (val) {  
  74.                  var ratio = Math.log(val) / Math.log(1338299500.0);  
  75.                  var col = 255.0 * ratio;  
  76.                  var colString = "rgba(0,50," + Math.round(col) + ",0.45)";  
  77.                  return colString;  
  78.              };  
  79.   
  80.             $("#map").igMap({  
  81.                 width: "700px",  
  82.                 height: "500px",  
  83.                 windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },  
  84.                 overviewPlusDetailPaneVisibility: "visible",  
  85.                 overviewPlusDetailPaneBackgroundImageUri:           "https://www.igniteui.com/images/samples/maps/world.png",  
  86.                 series: [{  
  87.                     type: "geographicShape",  
  88.                     name: "worldCountries",  
  89.                     markerType: "none",  
  90.                     shapeMemberPath: "points",  
  91.                     shapeDataSource:        'https://www.igniteui.com/data-files/shapes/world_countries_reg.shp',  
  92.                     databaseSource:         'https://www.igniteui.com/data-files/shapes/world_countries_reg.dbf',  
  93.                     opacity: 0.8,  
  94.                     outlineThickness: 1,  
  95.                     showTooltip: true,  
  96.                     tooltipTemplate: "geoShapeTooltip",  
  97.                     shapeStyleSelector: {  
  98.                         selectStyle: function (s, o) {  
  99.                             var pop = s.fields.item("POP2005");  
  100.                             var popInt = parseInt(pop);  
  101.                             var colString = colorPicker.getColorByIndex(popInt); /                                     /getColorValue(popInt);  
  102.                             return {  
  103.                                 fill: colString,  
  104.                                 stroke: "gray"  
  105.                             };  
  106.                         }  
  107.                     }  
  108.                 }]  
  109.             });  
  110.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  111.         });  
  112. </script>  
  113.   
  114. <div id="map"></div>  

Listing 22.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6. <ul>  
  7.     <li>  
  8.         <a href="@Url.Action("ShapesSeries", "Home")">  
  9.             Shapes Series  
  10.        </a>  
  11. </li>  
  12. </ul>  

Listing 23.

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

ASP.NET Core
Figure 15.

Area Series

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

  1. public IActionResult AreaSeries()  
  2. {  
  3.      return View();  
  4. }  

Listing 21.

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

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

  1. @{  
  2.     ViewData["Title"] = "Area Series";  
  3. }  
  4.   
  5. <h2>Area Series</h2>  
  6.   
  7. <script type="text/javascript">  
  8.   
  9.         $(function () {  
  10.             $("#map").igMap({  
  11.                 width: "700px",  
  12.                 height: "500px",  
  13.                 overviewPlusDetailPaneVisibility: "visible",  
  14.                 overviewPlusDetailPaneBackgroundImageUri:                   "https://www.igniteui.com/images/samples/maps/world.png",  
  15.                 series: [{  
  16.                     type: "geographicScatterArea",  
  17.                     name: "precipitation",  
  18.                     colorScale: {  
  19.                         type: "customPalette",  
  20.                         interpolationMode: "interpolateRGB",  
  21.                         minimumValue: 0.15,  
  22.                         palette: [  
  23.                             "#3300CC", "#4775FF", "#0099CC", "#00CC99",  
  24.                             "#33CC00", "#99CC00", "#CC9900", "#FFC20A", "#CC3300"]  
  25.                     },  
  26.                     triangleVertexMemberPath1: "v1",  
  27.                     triangleVertexMemberPath2: "v2",  
  28.                     triangleVertexMemberPath3: "v3",  
  29.                     longitudeMemberPath: "pointX",  
  30.                     latitudeMemberPath: "pointY",  
  31.                     colorMemberPath: "value",  
  32.                     triangulationDataSource:        "https://www.igniteui.com/data-files/shapes/nws_precip_2011091820.itf",  
  33.                 }],  
  34.                 windowRect: {  
  35.                     left: 0.31,  
  36.                     top: 0.375,  
  37.                     height: 0.025,  
  38.                     width: 0.025  
  39.                 }  
  40.             });  
  41.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  42.         });  
  43. </script>  
  44. <div id="map"></div>  

Listing 22.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6. <ul>  
  7.     <li>  
  8.         <a href="@Url.Action("AreaSeries", "Home")">  
  9.             Area Series  
  10.        </a>  
  11. </li>  
  12. </ul>  

Listing 23.

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

ASP.NET Core
Figure 16.

Contour Series

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

  1. public IActionResult ContourSeries()  
  2. {  
  3.      return View();  
  4. }  

Listing 21.

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

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

  1. @{  
  2.     ViewData["Title"] = "Contour Series";  
  3. }  
  4.   
  5. <h2>Contour Series</h2>  
  6.   
  7. <script type="text/javascript">  
  8.         $(function () {  
  9.             $("#map").igMap({  
  10.                 width: "700px",  
  11.                 height: "500px",  
  12.                 overviewPlusDetailPaneVisibility: "visible",  
  13.                 overviewPlusDetailPaneBackgroundImageUri:   "https://www.igniteui.com/images/samples/maps/world.png",  
  14.                 series: [{  
  15.                     type: "geographicContourLine",  
  16.                     name: "precipitation",  
  17.                     fillScale: {  
  18.                         type: "value",  
  19.                         brushes: [  
  20.                             "#3300CC", "#4775FF", "#0099CC", "#00CC99",  
  21.                             "#33CC00", "#99CC00", "#CC9900", "#FFC20A", "#CC3300"]  
  22.                     },  
  23.                     triangleVertexMemberPath1: "v1",  
  24.                     triangleVertexMemberPath2: "v2",  
  25.                     triangleVertexMemberPath3: "v3",  
  26.                     longitudeMemberPath: "pointX",  
  27.                     latitudeMemberPath: "pointY",  
  28.                     valueMemberPath: "value",  
  29.                     triangulationDataSource:    "https://www.igniteui.com/data-files/shapes/nws_precip_2011091820.itf",  
  30.                 }],  
  31.                 windowRect: {  
  32.                     left: 0.31,  
  33.                     top: 0.375,  
  34.                     height: 0.025,  
  35.                     width: 0.025  
  36.                 }  
  37.             });  
  38.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  39.         });  
  40. </script>  
  41.   
  42. <div id="map"></div>  

Listing 22.

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

  1. @{  
  2.     ViewData["Title"] = "Index"; 
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6. <ul>  
  7.     <li>  
  8.         <a href="@Url.Action("AreaSeries", "Home")">  
  9.             Area Series  
  10.        </a>  
  11. </li>  
  12. </ul> 

Listing 23.

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

Marker Template

Add the action method in side the Home Controller for MarkerTemplate map and add the following code.

  1. public IActionResult MarkerTemplate()  
  2. {  
  3.      return View();  
  4. }  

Listing 24.

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

Add the following html and script in side the “MarkerTemplate.cshtml” for the rendering the market template map type.

  1. @{  
  2.     ViewData["Title"] = "Marker Template";  
  3. }  
  4.   
  5. <style>  
  6.     #customTable2 {  
  7.         font-family: Verdana, Arial, Helvetica, sans-serif;  
  8.         width: 100%;  
  9.         border-collapse: collapse;  
  10.     }  
  11.  
  12.         #customTable2 td, #customTable2 th {  
  13.             font-size: 9px;  
  14.             border: 1px solid #2d87cb;  
  15.             padding: 3px 7px 2px 7px;  
  16.         }  
  17.  
  18.         #customTable2 th {  
  19.             font-weight: bold;  
  20.             font-size: 11px;  
  21.             text-align: left;  
  22.             padding-top: 5px;  
  23.             padding-bottom: 4px;  
  24.             background-color: #2d87cb;  
  25.             color: #ffffff;  
  26.         }  
  27. </style>  
  28. <script id="customTooltip" type="text/x-jquery-tmpl">  
  29.     <table id="customTable2">  
  30.         <tr><th colspan="2">${item.Name}</th></tr>  
  31.         <tr>  
  32.             <td>Office Type:</td>  
  33.             <td>${item.Type}</td>  
  34.         </tr>  
  35.     </table>  
  36. </script>  
  37. <h2>Marker Template</h2>  
  38. <script src="https://www.igniteui.com/data-files/ig-offices.js"></script>  
  39. <script type="text/javascript">  
  40.   
  41.         $(function () {  
  42.             $("#map").igMap({  
  43.                 width: "700px",  
  44.                 height: "500px",  
  45.                 overviewPlusDetailPaneVisibility: "visible",  
  46.                 overviewPlusDetailPaneBackgroundImageUri:               "https://www.igniteui.com/images/samples/maps/world.png",  
  47.                 windowRect: { left: 0.4, top: 0.2, height: 0.6, width: 0.6 },  
  48.                 backgroundContent: {  
  49.                     type: "openStreet"  
  50.                 },  
  51.                 series: [  
  52.                     {  
  53.                         type: "geographicSymbol",  
  54.                         name: "igOffices",  
  55.                         dataSource: igOffices,  
  56.                         latitudeMemberPath: "Latitude",  
  57.                         longitudeMemberPath: "Longitude",  
  58.                         showTooltip: true,  
  59.                         tooltipTemplate: "customTooltip",  
  60.                         markerCollisionAvoidance: "fade",  
  61.                         //  Defines marker template rendering function  
  62.                         markerTemplate: {  
  63.                             measure: function (measureInfo) {  
  64.                                 measureInfo.width = 10;  
  65.                                 measureInfo.height = 10;  
  66.                             },  
  67.                             render: function (renderInfo) {  
  68.                                 createMarker(renderInfo);  
  69.                             }  
  70.                         }  
  71.                     }  
  72.                 ]  
  73.             });  
  74.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  75.         });  
  76.   
  77.         function createMarker(renderInfo) {  
  78.             var ctx = renderInfo.context;  
  79.             var x = renderInfo.xPosition;  
  80.             var y = renderInfo.yPosition;  
  81.             var size = 10;  
  82.             var heightHalf = size / 2.0;  
  83.             var widthHalf = size / 2.0;  
  84.   
  85.             if (renderInfo.isHitTestRender) {  
  86.                 //  This is called for tooltip hit test only  
  87.                 //  Rough marker rectangle size calculation  
  88.                 ctx.fillStyle = renderInfo.data.actualItemBrush().fill();  
  89.                 ctx.fillRect(x - widthHalf, y - heightHalf, size, size);  
  90.             }   
  91. else  
  92.  {  
  93.                 var data = renderInfo.data;  
  94.                 var name = data.item()["Name"];  
  95.                 var type = data.item()["ID"];  
  96.                 //  Draw text  
  97.                 ctx.textBaseline = "top";  
  98.                 ctx.font = '8pt Verdana';  
  99.                 ctx.fillStyle = "black";  
  100.                 ctx.textBaseline = "middle";  
  101.                 wrapText(ctx, name, x + 3, y + 6, 80, 12);  
  102.   
  103.                 //  Draw marker  
  104.                 ctx.beginPath();  
  105.                 ctx.arc(x, y, 4, 0, 2 * Math.PI, false);  
  106.                 if (type == "Marketing")  
  107.                     ctx.fillStyle = "#2372D1";  
  108.                 else if (type == "Support")  
  109.                     ctx.fillStyle = "#4d4949";  
  110.                 else if (type == "Development Lab")  
  111.                     ctx.fillStyle = "#d13521";  
  112.                 else  
  113.                     ctx.fillStyle = "#36a815";  
  114.   
  115.                 ctx.fill();  
  116.                 ctx.lineWidth = 1;  
  117.                 ctx.strokeStyle = "black";  
  118.                 ctx.stroke();  
  119.             }  
  120.         }  
  121.   
  122.         //  Plots a rectangle with rounded corners with a semi-transparent frame  
  123.         function plotTextBackground(context, left, top, width, height) {  
  124.             var cornerRadius = 3;  
  125.             context.beginPath();  
  126.             //  Upper side and upper right corner  
  127.             context.moveTo(left + cornerRadius, top);  
  128.             context.lineTo(left + width - cornerRadius, top);  
  129.             context.arcTo(left + width, top, left + width, top + cornerRadius, cornerRadius);  
  130.             //  Right side and lower right corner  
  131.             context.lineTo(left + width, top + height - cornerRadius);  
  132.             context.arcTo(left + width, top + height, left + width - cornerRadius, top + height,                cornerRadius);  
  133.             //  Lower side and lower left corner  
  134.             context.lineTo(left + cornerRadius, top + height);  
  135.             context.arcTo(left, top + height, left, top + height - cornerRadius, cornerRadius);  
  136.             //  Left side and upper left corner  
  137.             context.lineTo(left, top + cornerRadius);  
  138.             context.arcTo(left, top, left + cornerRadius, top, cornerRadius);  
  139.             //  Fill white with 75% opacity  
  140.             context.globalAlpha = 1;  
  141.             context.fillStyle = "white";  
  142.             context.fill();  
  143.             context.globalAlpha = 1;  
  144.             //  Plot grey frame  
  145.             context.lineWidth = 1;  
  146.             context.strokeStyle = "grey";  
  147.             context.stroke();  
  148.         }  
  149.   
  150.         //  Outputs text in a word wrapped fashion in a transparent frame  
  151.         function wrapText(context, text, x, y, maxWidth, lineHeight) {  
  152.             var words = text.split(" ");  
  153.             var line = "";  
  154.             var yCurrent = y;  
  155.             var lines = [], currentLine = 0;  
  156.   
  157.             //  Find the longest word in the text and update the max width if the longest word             cannot fit  
  158.             for (var i = 0; n < words.length; i++) {  
  159.                 var testWidth = context.measureText(words[i]);  
  160.                 if (testWidth > maxWidth)  
  161.                     maxWidth = metrics.width;  
  162.             }  
  163.             //  Arrange all words into lines  
  164.             for (var n = 0; n < words.length; n++) {  
  165.                 var testLine = line + words[n];  
  166.                 var testWidth = context.measureText(testLine).width;  
  167.                 if (testWidth > maxWidth) {  
  168.                     lines[currentLine] = line;  
  169.                     currentLine++;  
  170.                     line = words[n] + " ";  
  171.                 }  
  172.                 else {  
  173.                     line = testLine + " ";  
  174.                 }  
  175.             }  
  176.             lines[currentLine] = line;  
  177.             //  Plot frame and background  
  178.             if (lines.length > 1) {  
  179.                 //  Multiline text  
  180.                 plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, maxWidth + 3,                       lines.length * lineHeight + 3);  
  181.             }  
  182.             else {  
  183.                 //  Single line text  
  184.                 var textWidth = context.measureText(lines[0]).width;    //  Limit frame width              to the actual line width  
  185.                 plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, textWidth + 3, lines.length              * lineHeight + 3);  
  186.             }  
  187.             //  Output lines of text  
  188.             context.fillStyle = "black";  
  189.             for (var n = 0; n < lines.length; n++) {  
  190.                 context.fillText(" " + lines[n], x, yCurrent);  
  191.                 yCurrent += lineHeight;  
  192.             }  
  193.         }  
  194. </script>  
  195. <div>  
  196.     <div id="map"></div>  
  197. </div>  

Listing 25.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4.   
  5. <h2>Types of Maps</h2>  
  6. <ul>  
  7.     <li>  
  8.         <a href="@Url.Action("MarketTemplate", "Home")">  
  9.            Market Template  
  10.        </a>  
  11. </li>  
  12. </ul>  

Listing 26.

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

ASP.NET Core
Figure 17.

Polyline Series

Add the action method in side the HomeController for PolylineSeries Map and add the following code.

  1. public IActionResult PolylineSeries()  
  2. {  
  3.      return View();  
  4. }  

Listing 24.

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

Add the following html and script in side the “PolylineSeries.cshtml” for the rendering the market template map type.

  1. @{  
  2.     ViewData["Title"] = "Polyline Series";  
  3. }  
  4. <script src="https://www.igniteui.com/js/map-helper.js" type="text/javascript"></script>  
  5. <style>  
  6.     #tooltipTable {  
  7.         font-family: Verdana, Arial, Helvetica, sans-serif;  
  8.         width: 100%;  
  9.         border-collapse: collapse;  
  10.     }  
  11.  
  12.         #tooltipTable td, #tooltipTable th {  
  13.             font-size: 9px;  
  14.             border: 1px solid #5da7df;  
  15.             padding: 3px 7px 2px 7px;  
  16.         }  
  17.  
  18.         #tooltipTable th {  
  19.             font-weight: bold;  
  20.             font-size: 11px;  
  21.             text-align: left;  
  22.             padding-top: 5px;  
  23.             padding-bottom: 4px;  
  24.             background-color: #5da7df;  
  25.             color: #ffffff;  
  26.         }  
  27. </style>  
  28. <script id="geoSymbolTooltip" type="text/x-jquery-tmpl">  
  29.     <table id="tooltipTable">  
  30.         <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>  
  31.         <tr>  
  32.             <td>Population:</td>  
  33.             <td>${item.Population}</td>  
  34.         </tr>  
  35.     </table>  
  36. </script>  
  37. <h2>Polyline Series</h2>  
  38. <script type="text/javascript">  
  39.     $(function () {  
  40.         // load geo-locations from shapefile and simplify data structure  
  41.         var worldAirports = [];  
  42.         var worldConnections = [];  
  43.   
  44.         var worldCities = [];  
  45.         var points = [];  
  46.         var shapeDataSource = new $.ig.ShapeDataSource({  
  47.             shapefileSource: "https://www.igniteui.com/data-files/shapes/world_cities.shp",  
  48.             databaseSource: "https://www.igniteui.com/data-files/shapes/world_cities.dbf",  
  49.             transformRecord: function (rec) {  
  50.                 var pointX = rec.points.item(0).item(0).x();  
  51.                 var pointY = rec.points.item(0).item(0).y();  
  52.                 var city = rec.fields.item("NAME");  
  53.                 var country = rec.fields.item("COUNTRY");  
  54.                 var population = rec.fields.item("POPULATION");  
  55.                 if (population > 0) {  
  56.                     points.push({  
  57.                         Latitude: pointY, Longitude: pointX,  
  58.                         City: city, Country: country,  
  59.                         Population: population  
  60.                     });  
  61.                 }  
  62.             },  
  63.             // process data and create map when finished loading shapefile  
  64.             callback: function () {  
  65.                 worldCities = points;  
  66.                 generateConnections();  
  67.                 createMap();  
  68.             }  
  69.         });  
  70.         shapeDataSource.dataBind();  
  71.         // generate flight paths and airport connections  
  72.         function generateConnections() {  
  73.   
  74.             var count = worldCities.length;  
  75.             var airports = [];  
  76.             var flights = [];  
  77.             var minDistance = 200;  
  78.             var maxDistance = 7000;  
  79.             var maxConnections = 300;  
  80.             var total = 0;  
  81.   
  82.             for (var i = 0; i < count; i++) {  
  83.                 var connections = [];  
  84.                 var origin = worldCities[i];  
  85.                 for (var ii = 0; ii < count; ii++) {  
  86.                     var dest = worldCities[ii];  
  87.   
  88.                     if (origin.City != dest.City &&  
  89.                         origin.Population > dest.Population &&  
  90.                         origin.Country == "US" &&  
  91.                         dest.Country == "US") {  
  92.   
  93.                         var hasConnection = false;  
  94.                         var distance = calcGeoDistance(origin, dest);  
  95.                         if (distance > minDistance &&  
  96.                             distance < maxDistance) {  
  97.   
  98.                             if (origin.Population > 3000000 &&  
  99.                                 dest.Population > 500000 && distance < maxDistance) {  
  100.                                 hasConnection = true;  
  101.                             }  
  102.                             // optional code to add more connections  
  103.                             //if (origin.Population > 1000000 &&  
  104.                             //      dest.Population > 250000 && distance < maxDistance * 0.75) {  
  105.                             //    hasConnection = true;  
  106.                             //}  
  107.                             //if (origin.Population > 500000 &&  
  108.                             //      dest.Population > 100000 && distance < maxDistance * 0.5) {  
  109.                             //    hasConnection = true;  
  110.                             //}  
  111.                         }  
  112.                         if (hasConnection) {  
  113.                             var path = [];  
  114.                             path = calcGeoPath(origin, dest);  
  115.                             connections.push(path);  
  116.                             airports.push(dest);  
  117.                             total++;  
  118.                         }  
  119.                     }  
  120.                 }  
  121.                 if (connections.length > 0) {  
  122.   
  123.                     flights.push({ city: origin, points: connections });  
  124.                     airports.push(origin);  
  125.                 }  
  126.                 if (total > maxConnections) break;  
  127.             }  
  128.             worldConnections = flights;  
  129.             worldAirports = airports;  
  130.         }  
  131.         // calculate geo-path between two locations  
  132.         function calcGeoPath(origin, dest) {  
  133.             var interval = 200;  
  134.             var path = [];  
  135.             var distance = calcGeoDistance(origin, dest);  
  136.             if (distance <= interval) {  
  137.                 path.push({ x: origin.Longitude, y: origin.Latitude });  
  138.                 path.push({ x: dest.Longitude, y: dest.Latitude });  
  139.             } else {  
  140.                 var current = origin;  
  141.                 for (var dist = interval; dist <= distance; dist += interval) {  
  142.                     path.push({ x: current.Longitude, y: current.Latitude });  
  143.   
  144.                     var bearing = calcBearing(current, dest);  
  145.                     current = calcDestination(current, bearing, interval);  
  146.                 }  
  147.                 path.push({ x: dest.Longitude, y: dest.Latitude });  
  148.             }  
  149.             return path;  
  150.         }  
  151.         // calculate bearing angle between two locations  
  152.         function calcBearing(origin, dest) {  
  153.             origin = toRadianLocation(origin);  
  154.             dest = toRadianLocation(dest);  
  155.             //var dLat = (dest.Latitude - origin.Latitude);  
  156.             var dLon = (dest.Longitude - origin.Longitude);  
  157.             var y = Math.sin(dLon) * Math.cos(dest.Latitude);  
  158.             var x = Math.cos(origin.Latitude) * Math.sin(dest.Latitude) -  
  159.                 Math.sin(origin.Latitude) * Math.cos(dest.Latitude) * Math.cos(dLon);  
  160.             var angle = Math.atan2(y, x);  
  161.             return toDegreesNormalized(angle);  
  162.         }  
  163.         // calculate destination for origin location and travel distance  
  164.         function calcDestination(origin, bearing, distance) {  
  165.   
  166.             var radius = 6371.0;  
  167.   
  168.             origin = toRadianLocation(origin);  
  169.             bearing = toRadians(bearing);  
  170.             distance = distance / radius; // angular distance in radians  
  171.   
  172.             var latitude = Math.asin(Math.sin(origin.Latitude) * Math.cos(distance) +  
  173.                 Math.cos(origin.Latitude) * Math.sin(distance) * Math.cos(bearing));  
  174.             var x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.Latitude);  
  175.             var y = Math.cos(distance) - Math.sin(origin.Latitude) * Math.sin(origin.Latitude);  
  176.             var longitude = origin.Longitude + Math.atan2(x, y);  
  177.             longitude = (longitude + 3 * Math.PI) % (2 * Math.PI) - Math.PI;  // normalize to -180..+180º  
  178.   
  179.             longitude = toDegrees(longitude);  
  180.             latitude = toDegrees(latitude);  
  181.             return { Longitude: longitude, Latitude: latitude };  
  182.         }  
  183.         // calculate distance between two locations  
  184.         function calcGeoDistance(origin, dest) {  
  185.             origin = toRadianLocation(origin);  
  186.             dest = toRadianLocation(dest);  
  187.             var sinProd = Math.sin(origin.Latitude) * Math.sin(dest.Latitude);  
  188.             var cosProd = Math.cos(origin.Latitude) * Math.cos(dest.Latitude);  
  189.             var dLon = (dest.Longitude - origin.Longitude);  
  190.             var angle = Math.acos(sinProd + cosProd * Math.cos(dLon));  
  191.             var distance = angle * 6371.0;  
  192.             return distance; // * 6371.0; // in km  
  193.         }  
  194.   
  195.         function toRadianLocation(geoPoint) {  
  196.             var longitude = toRadians(geoPoint.Longitude);  
  197.             var latitude = toRadians(geoPoint.Latitude);  
  198.             return { Longitude: longitude, Latitude: latitude };  
  199.         }  
  200.         function toRadians(degrees) {  
  201.             return degrees * Math.PI / 180;  
  202.         }  
  203.         function toDegrees(radians) {  
  204.             return (radians * 180.0 / Math.PI);  
  205.         }  
  206.         function toDegreesNormalized(radians) {  
  207.             var degrees = toDegrees(radians);  
  208.             degrees = (degrees + 360) % 360;  
  209.             return degrees;  
  210.         }  
  211.   
  212.         function createMap() {  
  213.             $("#map").igMap({  
  214.                 width: "700px",  
  215.                 height: "500px",  
  216.                 overviewPlusDetailPaneVisibility: "visible",  
  217.                 overviewPlusDetailPaneBackgroundImageUri: "https://www.igniteui.com/images/samples/maps/world.png",  
  218.                 windowRect: {  
  219.                     left: 0.180,  
  220.                     top: 0.3143,  
  221.                     width: 0.180,  
  222.                     height: 0.180  
  223.                 },  
  224.                 series: [{  
  225.                     type: "geographicPolyline",  
  226.                     name: "worldConnections",  
  227.                     shapeMemberPath: "points",  
  228.                     dataSource: worldConnections,  
  229.                     shapeFilterResolution: 5.0,  
  230.                     outline: "rgba(20,20,20,0.5)",  
  231.                     thickness: 0.75,  
  232.                     showTooltip: false,  
  233.                 },  
  234.                 {  
  235.                     type: "geographicSymbol",  
  236.                     name: "worldAirports",  
  237.                     dataSource: worldAirports,  
  238.                     longitudeMemberPath: "Longitude",  
  239.                     latitudeMemberPath: "Latitude",  
  240.                     markerType: "circle",  
  241.                     markerCollisionAvoidance: "fade",  
  242.                     markerOutline: "rgba(90,160,220,0.9)",  
  243.                     markerBrush: "rgba(90,160,220,0.7)",  
  244.                     showTooltip: true,  
  245.                     tooltipTemplate: "geoSymbolTooltip",  
  246.                 }  
  247.                 ]  
  248.             });  
  249.             $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");  
  250.         };  
  251.     });  
  252. </script>  
  253.   
  254. <div>  
  255.     <div id="map"></div>  
  256. </div>  

Listing 25.

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

  1. @{  
  2.     ViewData["Title"] = "Index";  
  3. }  
  4. <h2>Types of Maps</h2>  
  5. <ul>  
  6.     <li>  
  7.         <a href="@Url.Action("Polyline", "Home")">  
  8.            Polyline Series  
  9.        </a>  
  10. </li>  
  11. </ul>  

Listing 26.

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

ASP.NET Core
Figure 17.

Summary

Using map in web application is very useful it can be use as a an actual map for representing the geographic locations. There are other use of map in web applications like Checking for certain spots like restaurants, cafe. Other use is monitoring the traffics, In e-commerce applications providing the location based discounts to increase sale. Tracking the physical activities like running, walk etc. Calculating cost of shipping charge. There are many ways to use the maps that will certainly add the  benefits to business.     

Learn more, download a free trial, and get started here,


Similar Articles