Media
v1.0.0Added in 1.0.0
A real map to pick or show a place: a pin you drag or drop, an optional radius with a towns count, offline search and a static fallback.
With a mouse the map is live in place: drag to pan, double-click or use the round + and − buttons to zoom, and the wheel zooms only after you clicked into the map, so scrolling the page never gets stuck on it. Click anywhere to drop the pin there (it falls in with a small squash and a ripple) or drag the pin itself; it lifts while you hold it and the circle follows. Type in the search field to find a town, an area or a county offline (an online geocoder finds street addresses); arrows move through the results, Enter picks one and the map flies there. The locate button asks for your position and moves the pin; a refusal is shown under the map. With a radius set, the slider under the map resizes the circle live, shows how many towns fall inside, and fits the view to the circle when you let go. On a phone the inline map does not steal the page scroll: tap it and a full-height sheet opens with the search on top, a fully interactive map (pinch, drag, tap to place) and Done at the bottom; closing the sheet any other way discards the changes. Keyboard: Tab reaches the search, the map (arrows pan, + and − zoom), the pin (arrows move it 10px, Shift+arrows 50px, committed a moment after you stop), the map buttons and the slider. Screen readers get the map as an application described by the place name and coordinates under it, and hear every move. Without network or before the map loads, a drawn static card shows the pin, the place and the coordinates.
npx wingo-ui@latest add location-mapPro item: the CLI needs a Pro account. See plans
Move the pin onto the building. The exact address only shows once you confirm a viewing.
Cluj-Napoca · 46.7700° N, 23.5857° E
value 46.7700, 23.5857 · radius 5 km · step 1 · zoom 13 · interactive auto · wheel focus · drag on · click on · lazy on · dark filter