Display Map in MVC CORE

Question

Display Map in MVC CORE

Anonymous

I am displaying location from web browser I want to embed map here and pass latitude and longitude

https://github.com/KalyanAllam/LatLongAddress/blob/master/LatLongAddress/Views/Home/Index.cshtml

https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/search-module-examples/basic-reverse-geocode-example

@model LatLongAddress.Models.MyGeoData
@{
    ViewData["Title"] = "Home Page";
} 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
          
            var data = {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
            };

            $.ajax({
                url: "/Home/ReverseGeocode",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (response) {
                    console.log(response);
                      $('#latitude').text(response.latitude)
                    $('#longitude').text(response.longitude)
                    $('#address').text(response.address)
                    $('#postalcode').text(response.postalcode)
                    $('#weather').text(response.weather)
                    $('#todaypst').text(response.todaypst)
                    $('#todayest').text(response.todayest)
                        $('#todaytok').text(response.todaytok)
             
                    $('#temperature').text(response.temperature + " °F")
                }
            })
          
        }

    </script>
</head>
<body>

 <button onclick="getLocation()">GetLocation</button>  

    <br>
     Latitude :  <h4 id="latitude">      @ViewData["latitude"]</h4>
  Longitude:  <h4 id="longitude">   @ViewData["longitude"]</h4>
  Address :  <h4 id="address"> @ViewData["address"]</h4>
  Postalcode :     <h4 id="postalcode"> @ViewData["postalcode"]</h4>
  weather  :    <h4 id="weather"> @ViewData["weather"]</h4>
  temperature  :  <h4 id="temperature"> @ViewData["temperature"]</h4>
  
    
    <br>

    <br />
    <label><input type="radio" name="temperature" value="C"   />Celsius</label>
    <label><input type="radio" name="temperature" value="F" checked />Fahrenheit</label>
    <h4 id="temperature"> </h4>
    <br>
    <h4>
        Latitude and Longtitude from browser  
    </h4>

    <script>
        const temperatureElement = document.getElementById("temperature");

        document.querySelectorAll('input[name="temperature"]').forEach((radio) => {
            radio.addEventListener("change", () => {
                updateTemperature(temperatureElement.textContent, radio.value);
            });
        });

        function updateTemperature(value, unit) {
            const newValue = convertTemperature(value, unit);
            temperatureElement.textContent = newValue;
        }

        function convertTemperature(value, unit) {
            const numericValue = parseFloat(value);

            if (isNaN(numericValue)) {
                return "Invalid input";
            }

            if (unit === "C") {
                return ((numericValue - 32) * (5 / 9)).toFixed(1) + " °C";
            } else if (unit === "F") {
                return ((numericValue * 9 / 5) + 32).toFixed(1) + " °F";
            } else {
                return "Invalid unit";
            }
        }

    </script>



 
</h4>
</body>

</html>

1 answer

Your answer

Answer 1

dONE

@model LatLongAddress.Models.LocationModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type='text/javascript'>
        var map, searchManager;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u',
                center: new Microsoft.Maps.Location(@ViewData["lat"], @ViewData["long"]),
                zoom: 11
            });

            //Make a request to reverse geocode the center of the map.
            reverseGeocode();
        }

        function reverseGeocode() {
            //If search manager is not defined, load the search module.
            if (!searchManager) {
                //Create an instance of the search manager and call the reverseGeocode function again.
                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    reverseGeocode();
                });
            } else {
                var searchRequest = {
                    location: map.getCenter(),
                    callback: function (r) {
                        //Tell the user the name of the result.
                        alert(r.name);
                    },
                    errorCallback: function (e) {
                        //If there is an error, alert the user about it.
                        alert("Unable to reverse geocode location.");
                    }
                };

                //Make the reverse geocode request.
                searchManager.reverseGeocode(searchRequest);
            }
        }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <form asp-action="Index">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Location" class="control-label"></label>
            <input asp-for="Location" class="form-control" />
            <span asp-validation-for="Location" class="text-danger"></span>
        </div>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
        <hr />
        Local Timë:</br>
        @ViewData["timez"] </br>
        Location:</br>
        @ViewData["loc"]</br>
        @ViewData["err"]</br>
        Latitude:</br>
        @ViewData["lat"] </br>
        Longitude:</br>
        @ViewData["long"]
        <h4> This page  calculates local time  </h4>
    </form>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

</body>
</html>

Share via

Display Map in MVC CORE

1 answer

Your answer