Skip to main content
CountryMapField combines a world map and country selector. It needs no geographic map SDK or map-provider token.

Multiple countries

State and validation

Default state is an array of uppercase ISO alpha-2 codes. multiple(false) changes it to a code or null and hides bulk groups. countries(null) admits the full country catalog; an explicit list constrains map and dropdown. Named group countries must belong to the allowed set. There may be at most 32 named groups. Submitted selection size is bounded by the unique allowed country catalog; duplicates and unsupported codes are rejected. Field disabled/readOnly policies block both SVG and list edits.

Map and list interactions

CountryMap uses the shared SelectField engine: rich flags/names, chips, searching, virtualization/menu lifecycle, desktop dropdown and mobile sheet. Names sort with the current locale’s ICU collator when available. Country group checkboxes show none/partial/all selected states and counts; their design/animation uses the same indicator asset as ChoiceCheckboxCards. Group membership and individual choices update the same entangled ISO state. Map regions support Enter/Space activation; list selection provides a keyboard alternative. Zoom/pan never changes selected values. mapHeight() accepts 200–800 px; mapColor() accepts #RRGGBB. The embedded simplified dataset has 173 outlines. Countries/territories without an outline remain selectable in the full list. This map is a selection aid, not an authoritative border/geopolitical dataset. Outlines come from the MIT jsvectormap 1.7.0 world dataset (verified package integrity), with attribution/license in resources/licenses/jsvectormap-world-LICENSE.txt. No jsvectormap rendering library code or third-party editor code is used. The world surface itself needs no map API, tile requests, geolocation or WebGL. Country flags use the shared local flag assets also used by CountryField and PhoneField. Geographic provider options in the shared map reference apply to the separate map components, not this SVG country map. The playground configures three explicit bulk groups (Latin America, Sub-Saharan Africa, Central Asia). Applications define their own countryGroups() policies; region membership is not assumed by the field. Group rows and country rows use the same checkbox column and selection indicator; counts show selected/total. A Countries heading reuses the shared Select group heading style. Bulk toggles remain keyboard accessible.

Single country

Single selection stores an uppercase ISO alpha-2 string such as PL, or null. Use a scalar model attribute for this mode. Multiple selection stores an array of ISO codes; use a JSON column with an Eloquent array cast. Labels, translated names and SVG paths are not the saved value.

Appearance and camera

Last modified on October 16, 2026