I'm trying to pass the value of input to my js for the leaflet map. what I want to do is :
1- let the user to pick a point
2- When user click on the button , automatically draw a circle of the selected point with a radius that user entered.
I achieved the first objective but the second one doesn't work because I could not send the input radius to js.
Here is my 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 © <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);
}
This my View.. I'm using 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>
Update I solved the issue by editing the following code:
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();
}