Estoy tratando de pasar el valor de entrada a mi js para el mapa del folleto. lo que quiero hacer es:

1- dejar que el usuario elija un punto

2- Cuando el usuario haga clic en el botón, dibujará automáticamente un círculo del punto seleccionado con un radio que el usuario ingresó.

Logré el primer objetivo pero el segundo no funciona porque no pude enviar el radio de entrada a js.

Aquí está mi Js

 var map = L.map('map').setView([51.755690483335144, -1.2591878937481786], 12); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1 }).addTo(map); var popup = L.popup(); var marker = null; var circle = null; var radius = document.getElementById("radius").value; var Lat ; var Long; // Onclick event to get the discription of the selcted point in a circular area function onMapClick(e) { // map.removeLayer(Initialmarker); if (marker !== null ) { map.removeLayer(marker); // map.removeLayer(circle); } marker = new L.Marker(e.latlng); map.addLayer(marker); Lat = e.latlng.lat Long = e.latlng.lng; } map.on('click', onMapClick); function GetRadius(e) { circle = new L.circle([Lat,Long],radius); map.addLayer(circle); }

Esta es mi vista... estoy usando ASP MVC CORE

 div class="form-gro row "> <div class="col-auto"> 1- Enter Radius: </div> <div class="col-auto"> <input type="number" id="radius"> </div> <div class="col-auto"> Meter </div> <div><button class="btn btn-primary" onclick="GetRadius()">Press me!</button></div> <br> <div id="map" ></div>

Actualización Resolví el problema editando el siguiente código:

 function GetRadius(e) { let r = document.getElementById("radius").value; circle = new L.circle([Lat,Long],{radius:r}); map.addLayer(circle); circle.bindPopup( "<br/> Radius is : " + r +" Meter" ).openPopup(); }