Location Input Showcase
Location
Loading Map
Dark Color Scheme:
Search Within Map Boundries:
Include POI Categories:
Exclude POI Categories:
Limit to Countries:
Filter Result Type:
Include Address Categories:
Exclude Address Categories:
{
"place_id": "I1B2A279E956AFF37",
"muid": "1957420550111035191",
"latitude": 39.9782211,
"longitude": -83.0031064,
"name": "The Lox",
"formatted_address": "772 N High St, Unit 106, Columbus, OH 43215, United States",
"country": "United States",
"country_code": "US",
"administrative_area": "Ohio",
"administrative_area_code": "OH",
"locality": "Columbus",
"sub_locality": "Italian Village",
"full_thoroughfare": "772 N High St"
}Component Documentation
Component Name
LocationInput
Builder Function Name
create_location_input_manager
Description
Selects a geographic location using MapKit JS, optionally with search and filters for POIs/countries/addresses. Outputs place details.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | object or null | Current location data (place_id, latitude, longitude, etc.). If non-null, will be used for initial map view. | |
| mapkit_js_token | string | MapKit JS token for Apple Maps usage. | |
| is_popover | boolean | true | If true, the component is rendered in a popover (centered modal). |
| is_popover_button | boolean | false | If true, shows a button that opens the map popover, rather than rendering inline. |
| is_show_search | boolean | true | If true, includes a search box for place name/POI/address search. |
| label | string or null | Label text displayed near the location input. | |
| height | number (REM) or null | Map container height. If null, defaults to 'min(40rem, 50vh)'. | |
| width | number (REM) or null | Map container width. If null, defaults to 'clamp(60rem, 80vw, 100%)'. | |
| is_dark_color_scheme | boolean | false | Sets the initial map color scheme (light or dark). |
| on_finish | function | Optional callback, called with final location data when finishing. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| initialize_map | Loads the MapKit JS script if needed and initializes the Apple Map instance once loaded. | No Params | void |
| set_val | Sets the manager's val (location object). | input: object with place info or null | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | object or null | Selected location object with place details (latitude, longitude, name, etc.). |
| map | object or null | Reference to the underlying MapKit map instance if loaded. |
| popover_manager | object | Popover manager controlling the parent popover if is_popover=true. |
| popover_button_manager | object | Button manager if is_popover_button=true. |
| label | string or null | Display label for the location input. |
| height | string (CSS size) | Map container height CSS, e.g. '40rem' or '50vh'. |
| width | string (CSS size) | Map container width CSS, e.g. '60rem' or '80vw'. |
| is_show_search | boolean | Whether the search UI is visible. |
| extra_popover_manager | object | Popover manager for extra search filters popover. |
| extra_popover_button_manager | object | Button manager that opens the extra filters popover. |
| finish_button_manager | object | Button manager for final 'Finish' button in popover footer. |
| suggestions_prepped | array | List of prepared search suggestions from MapKit's autocomplete results. |
| is_dark_mode_checkbox_manager | object | Checkbox manager toggling the map color scheme (light/dark). |
| clear_suggestions_button_manager | object | Clears the suggestions_prepped array. |
| search_text_input_manager | object | Text input manager for the search query. |
| search_button_manager | object | Button manager that triggers full map search by text. |
| search_filter_within_map_boundries_checkbox_manager | object | Checkbox manager for restricting search to the visible map region. |
| search_filter_include_poi_categories_dropdown_manager | object | Dropdown manager for specifying POI categories to include in results. |
| search_filter_exclude_poi_categories_dropdown_manager | object | Dropdown manager for specifying POI categories to exclude from results. |
| search_filter_limit_to_countries_dropdown_manager | object | Dropdown manager for restricting search results to specified countries. |
| search_filter_result_type_dropdown_manager | object | Dropdown manager for toggling inclusion of address / POI / query / physicalFeature results. |
| search_filter_include_address_categories_dropdown_manager | object | Dropdown manager for address categories to include (country, locality, postal code, etc.). |
| search_filter_exclude_address_categories_dropdown_manager | object | Dropdown manager for address categories to exclude (country, locality, postal code, etc.). |
| mapkit_js_token | string or null | MapKit JS token for Apple Maps usage. |
