Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

204
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda