Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

197
Views
Pass the user input radius to a circle of the map to Leafletjs

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 &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);
}

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();

}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!