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 :

<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.5.0/dist/geosearch.css" />

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-geosearch@3.5.0/dist/geosearch.umd.js"></script>
    <script src="https://unpkg.com/leaflet-control-custom@1.0.0/Leaflet.Control.Custom.js"></script>

</head>

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

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

            map.addControl(geocodageAdresse);

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

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

JavaScript
​x
 
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.5.0/dist/geosearch.css" />
​
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-geosearch@3.5.0/dist/geosearch.umd.js"></script>
    <script src="https://unpkg.com/leaflet-control-custom@1.0.0/Leaflet.Control.Custom.js"></script>
​
</head>
​
<body>
    <div id="mapid" style="width: 1920px; height: 1018px;">
        <script>
            const carte = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { minZoom: 1, maxZoom: 18 });
            const map = L.map('mapid', { layers: [carte], attributionControl: false, drawControl: true }).setView([46.73881, -1.10074], 6);
​
            const geocodageAdresse = new GeoSearch.GeoSearchControl({
                provider: new GeoSearch.OpenStreetMapProvider(),
            });
​
            map.addControl(geocodageAdresse);
​
            L.control.custom({
                position: 'topleft',
                content: '<p>Circle size: ' +
                    '<select id="dist">' +
                    '<option value="0">0Km</option>' +
                    '<option value="5000">5Km</option>' +
                    '<option value="10000">10Km</option>' +
                    '</select></p>',
                events: { click: function () { $("form").submit(); } }
            }).addTo(map);
​
            map.on("geosearch/showlocation", function (e) { radiusGPS(e); });
            var geoCircle = L.circle();
            function radiusGPS(e) {
                var value = document.getElementById('dist').value;
                map.removeLayer(geoCircle);
                geoCircle = L.circle([e.location.y.toFixed(2), e.location.x.toFixed(2)], { radius: value }).addTo(map);
            }
        </script>
</body>
</html>

Answer

Solution:

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

Advertisement

Answer