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>
Advertisement
Answer
Solution:
You can add a change
listener and then change the radius with geoCircle.setRadius(value)