HTML + CSSFilters
Distance radius map filter
A slider that grows a radar circle around your location on a small map as you raise the distance.
Settings
16px
1x
25km
Code
<div class="uv-fds"><div class="map" aria-hidden="true"><i class="rd"></i><i class="ar"></i><i class="pn"></i></div><label class="sl"><span class="hd"><span>Maximum distance</span><output><b>10</b> km</output></span><input type="range" min="1" max="25" value="10"></label></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
Search radius is easier to judge on a map than as a number. This filter draws a tiny city map with streets, a park and a lake, puts a pin in the middle and wraps it in a circle that grows as you drag the range slider. A soft radar sweep turns inside the circle so the area feels live.
Set the maximum distance with the extra slider in the controls. The range input is native and labeled, the output shows the value in kilometers, and the map is CSS gradients, so there are no images or map APIs to load.