Merge pull request #1 from SyncfusionExamples/911948-CoreRoute

911948: added sample for creating a route between the markers.

Controllers/HomeController.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Mvc;
+using Newtonsoft.Json;
+using System.Diagnostics;
+using WebApplication1.Models;
+
+namespace WebApplication1.Controllers
+{
+    public class HomeController : Controller
+    {
+        private readonly ILogger<HomeController> _logger;
+
+        public HomeController(ILogger<HomeController> logger)
+        {
+            _logger = logger;
+        }
+
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Privacy()
+        {
+            return View();
+        }
+
+        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+        public IActionResult Error()
+        {
+            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+        }
+    }
+}

Models/ErrorViewModel.cs

@@ -0,0 +1,9 @@
+namespace WebApplication1.Models
+{
+    public class ErrorViewModel
+    {
+        public string? RequestId { get; set; }
+
+        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+    }
+}

Program.cs

@@ -0,0 +1,30 @@
+using WebApplication1.Models;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddControllersWithViews();
+
+var app = builder.Build();
+
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Home/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseStaticFiles();
+
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapControllerRoute(
+    name: "default",
+    pattern: "{controller=Home}/{action=Index}/{id?}");
+
+app.Run();

Properties/launchSettings.json

@@ -0,0 +1,28 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:61742",
+      "sslPort": 44301
+    }
+  },
+  "profiles": {
+    "WebApplication1": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7022;http://localhost:5258",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

README.md

@@ -1,2 +1,5 @@
-# How-to-create-a-route-between-the-markers-on-the-Core-Maps-from-the-external-source
-This article explains how to obtain the coordinate points and integrate them into the Maps to plot a route between the designated locations in the ASP.NET Core application.
+# How-to-create-a-route-between-the-markers-in-the-Core-maps
+
+This sample demonstrates how to obtain the coordinates for markers and navigation routes from the Google Maps Directions API and integrate them into the Syncfusion Maps to plot the route between designated locations.
+
+Add your key for the Google Maps Directions API to the **_Layout.cshtml** file located in the **Views/Shared** folder.

Views/Home/Index.cshtml

@@ -0,0 +1,94 @@
+@{
+    ViewData["Title"] = "Home Page";
+}
+
+@using Syncfusion.EJ2.Maps
+@using Syncfusion.EJ2
+
+<script>
+    var source;
+    var destination;
+    document.addEventListener('DOMContentLoaded', function () {
+        initMap();
+    });
+    function initMap() {
+        var directionsService = new google.maps.DirectionsService();
+        var onButtonClick = function () {
+            source = document.getElementById('input').value.toLowerCase();
+            destination = document.getElementById('output').value.toLowerCase();
+            if (
+                source !== null &&
+                source !== '' &&
+                destination !== null &&
+                destination !== ''
+            ) {
+                calculateAndDisplayRoute(directionsService);
+            }
+        };
+        document.getElementById('route').addEventListener('click', onButtonClick);
+    }
+
+    function calculateAndDisplayRoute(directionsService) {
+        directionsService
+            .route({
+                origin: {
+                    query: source,
+                },
+                destination: {
+                    query: destination,
+                },
+                travelMode: google.maps.TravelMode.DRIVING,
+            })
+            .then((response) => {
+                maps.ej2_instances[0].zoomSettings.shouldZoomInitially = true;
+                var markers = maps.ej2_instances[0].layers[0].markerSettings;
+                markers[0].dataSource = [];
+                markers[0].dataSource.push({
+                    latitude: response.routes[0].legs[0].start_location.lat(),
+                    longitude: response.routes[0].legs[0].start_location.lng(),
+                });
+                markers[0].dataSource.push({
+                    latitude: response.routes[0].legs[0].end_location.lat(),
+                    longitude: response.routes[0].legs[0].end_location.lng(),
+                });
+                var navigationLines = maps.ej2_instances[0].layers[0].navigationLineSettings;
+                var coordinates = response.routes[0].overview_path;
+                var latitudes = [];
+                var longitudes = [];
+                for (var i = 0; i < coordinates.length; i++) {
+                    latitudes.push(coordinates[i].lat());
+                    longitudes.push(coordinates[i].lng());
+                }
+                navigationLines[0].latitude = latitudes;
+                navigationLines[0].longitude = longitudes;
+            })
+            .catch((e) => window.alert('Directions request failed due to ' + status));
+    }
+</script>
+
+<div>
+    <label for="textInput">Source: </label>
+    <input type="text" id="input" name="textInput" /><br />
+    <br />
+    <label for="textOutput">Destination: </label>
+    <input type="text" id="output" name="textOutput" /><br /><br />
+    <button id="route">Add Route</button>
+</div>
+
+<ejs-maps id="maps">
+    <e-maps-zoomsettings enable="true"></e-maps-zoomsettings>
+    <e-maps-layers >
+        <e-maps-layer urlTemplate="http://a.tile.openstreetmap.org/level/tileX/tileY.png">
+            <e-layersettings-markers>
+                <e-layersettings-marker visible="true"
+                                        shape="Image" height="20" width="20"
+                                        imageUrl="https://ej2.syncfusion.com/aspnetcore/styles/images/maps/ballon.png"></e-layersettings-marker>
+            </e-layersettings-markers>
+            <e-layersettings-navigationlines>
+                <e-layersettings-navigationline visible="true" color="black" angle="0" width="2">
+                </e-layersettings-navigationline>
+            </e-layersettings-navigationlines>
+        </e-maps-layer>
+    </e-maps-layers>
+</ejs-maps>
+

Views/Home/Privacy.cshtml

@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Privacy Policy";
+}
+<h1>@ViewData["Title"]</h1>
+
+<p>Use this page to detail your site's privacy policy.</p>

Views/Shared/Error.cshtml

@@ -0,0 +1,25 @@
+@model ErrorViewModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

Views/Shared/_Layout.cshtml

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - WebApplication1</title>
+    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/27.1.50/material.css" />
+    <script src="https://cdn.syncfusion.com/ej2/27.1.50/dist/ej2.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=Your_Key&callback=initMap&v=weekly"
+            defer></script>
+</head>
+<body>
+    <header>
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+            <div class="container-fluid">
+                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
+                    <ul class="navbar-nav flex-grow-1">
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <div class="container">
+        <main role="main" class="pb-3">
+            @RenderBody()
+        </main>
+    </div>
+
+    <footer class="border-top footer text-muted">
+        <div class="container">
+            &copy; 2023 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+        </div>
+    </footer>
+    <script src="~/lib/jquery/dist/jquery.min.js"></script>
+    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="~/js/site.js" asp-append-version="true"></script>
+    <ejs-scripts></ejs-scripts>
+    @await RenderSectionAsync("Scripts", required: false)
+</body>
+</html>

Views/Shared/_Layout.cshtml.css

@@ -0,0 +1,48 @@
+/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+a {
+  color: #0077cc;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  line-height: 60px;
+}

Views/Shared/_ValidationScriptsPartial.cshtml

@@ -0,0 +1,2 @@
+<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Views/_ViewImports.cshtml

@@ -0,0 +1,4 @@
+@using WebApplication1
+@using WebApplication1.Models
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Syncfusion.EJ2

Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

WebApplication1.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net6.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="27.1.50" />
+  </ItemGroup>
+
+</Project>

appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}