Skip to content

Leaflet Change the circle radius in real time

I would like to change the size of the circle when selecting a value in the dropdown menu. I can change the size of the circle by pressing enter again in the search bar but I want to do it automaticaly when selecting a new value.

I thought about emulate the enter key (folowing this : jquery (or pure js) simulate enter key pressed for testing) in the input box but I wasn’t able to make it work. Maybe someone have a better idea?

My code :

    <link rel="stylesheet" href="[email protected]/dist/leaflet.css" />
    <link rel="stylesheet" href="[email protected]/dist/geosearch.css" />

    <script src="[email protected]/dist/leaflet.js"></script>
    <script src="[email protected]/dist/geosearch.umd.js"></script>
    <script src="[email protected]/Leaflet.Control.Custom.js"></script>


    <div id="mapid" style="width: 1920px; height: 1018px;">
            const carte = L.tileLayer('https://{s}{z}/{x}/{y}.png', { minZoom: 1, maxZoom: 18 });
            const map ='mapid', { layers: [carte], attributionControl: false, drawControl: true }).setView([46.73881, -1.10074], 6);

            const geocodageAdresse = new GeoSearch.GeoSearchControl({
                provider: new GeoSearch.OpenStreetMapProvider(),


                position: 'topleft',
                content: '<p>Circle size: ' +
                    '<select id="dist">' +
                    '<option value="0">0Km</option>' +
                    '<option value="5000">5Km</option>' +
                    '<option value="10000">10Km</option>' +
                events: { click: function () { $("form").submit(); } }

            map.on("geosearch/showlocation", function (e) { radiusGPS(e); });
            var geoCircle =;
            function radiusGPS(e) {
                var value = document.getElementById('dist').value;
                geoCircle =[e.location.y.toFixed(2), e.location.x.toFixed(2)], { radius: value }).addTo(map);



You can add a change listener and then change the radius with geoCircle.setRadius(value)