Location Showcase
Example
Loading Map
[
{
"muid": "8657441869121576464",
"latitude": 64.1475973,
"longitude": -21.9386179,
"name": "Reykjavík, Greater Reykjavík",
"formatted_address": "Reykjavík, Iceland",
"country": "Iceland",
"country_code": "IS",
"administrative_area": "Greater Reykjavík",
"locality": "Reykjavík"
},
{
"type": "route",
"method": "path",
"from": {
"muid": "8657441869121576464",
"latitude": 64.1475973,
"longitude": -21.9386179,
"name": "Reykjavík, Greater Reykjavík",
"formatted_address": "Reykjavík, Iceland",
"country": "Iceland",
"country_code": "IS",
"administrative_area": "Greater Reykjavík",
"locality": "Reykjavík"
},
"to": {
"place_id": "I89195AE7BB11F0FF",
"muid": "9879027208936354047",
"poi_category": "PublicTransport",
"latitude": 59.3297578,
"longitude": 18.0572531,
"name": "Stockholm Centralstation",
"formatted_address": "Stockholm, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Stockholm County",
"locality": "Stockholm"
},
"line_width": 3,
"stroke_color": "#0000ff"
},
{
"place_id": "I89195AE7BB11F0FF",
"muid": "9879027208936354047",
"poi_category": "PublicTransport",
"latitude": 59.3297578,
"longitude": 18.0572531,
"name": "Stockholm Centralstation",
"formatted_address": "Stockholm, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Stockholm County",
"locality": "Stockholm"
},
{
"type": "route",
"from": {
"place_id": "I89195AE7BB11F0FF",
"muid": "9879027208936354047",
"poi_category": "PublicTransport",
"latitude": 59.3297578,
"longitude": 18.0572531,
"name": "Stockholm Centralstation",
"formatted_address": "Stockholm, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Stockholm County",
"locality": "Stockholm"
},
"to": {
"muid": "14740132918557855751",
"latitude": 55.662352,
"longitude": 12.6159319,
"name": "Copenhagen",
"formatted_address": "Copenhagen, Denmark",
"country": "Denmark",
"country_code": "DK",
"administrative_area": "Capital Region of Denmark",
"locality": "København S",
"sub_locality": "Copenhagen"
},
"line_width": 3,
"stroke_color": "#00ff00"
},
{
"muid": "14740132918557855751",
"latitude": 55.662352,
"longitude": 12.6159319,
"name": "Copenhagen",
"formatted_address": "Copenhagen, Denmark",
"country": "Denmark",
"country_code": "DK",
"administrative_area": "Capital Region of Denmark",
"locality": "København S",
"sub_locality": "Copenhagen"
},
{
"type": "route",
"method": "path",
"from": {
"muid": "14740132918557855751",
"latitude": 55.662352,
"longitude": 12.6159319,
"name": "Copenhagen",
"formatted_address": "Copenhagen, Denmark",
"country": "Denmark",
"country_code": "DK",
"administrative_area": "Capital Region of Denmark",
"locality": "København S",
"sub_locality": "Copenhagen"
},
"to": {
"place_id": "I936475A0BFE4700C",
"muid": "10620743154521108492",
"poi_category": "PublicTransport",
"latitude": 65.8657638,
"longitude": 23.1417032,
"name": "Kalix, Norrbotten County",
"formatted_address": "Kalix, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"administrative_area_code": "BD",
"locality": "Kalix"
},
"line_width": 3,
"stroke_color": "#ff00ff"
},
{
"place_id": "I936475A0BFE4700C",
"muid": "10620743154521108492",
"poi_category": "PublicTransport",
"latitude": 65.8657638,
"longitude": 23.1417032,
"name": "Kalix, Norrbotten County",
"formatted_address": "Kalix, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"administrative_area_code": "BD",
"locality": "Kalix"
},
{
"type": "route",
"from": {
"place_id": "I936475A0BFE4700C",
"muid": "10620743154521108492",
"poi_category": "PublicTransport",
"latitude": 65.8657638,
"longitude": 23.1417032,
"name": "Kalix, Norrbotten County",
"formatted_address": "Kalix, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"administrative_area_code": "BD",
"locality": "Kalix"
},
"to": {
"place_id": "IEDE6C0844FB5BAEB",
"muid": "17142600706137897707",
"poi_category": "PublicTransport",
"latitude": 68.4417435,
"longitude": 17.4432089,
"name": "Narvik, Nordland",
"formatted_address": "Narvik, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Narvik"
},
"line_width": 3,
"stroke_color": "#ff9900"
},
{
"place_id": "IEDE6C0844FB5BAEB",
"muid": "17142600706137897707",
"poi_category": "PublicTransport",
"latitude": 68.4417435,
"longitude": 17.4432089,
"name": "Narvik, Nordland",
"formatted_address": "Narvik, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Narvik"
},
{
"type": "route",
"from": {
"place_id": "IEDE6C0844FB5BAEB",
"muid": "17142600706137897707",
"poi_category": "PublicTransport",
"latitude": 68.4417435,
"longitude": 17.4432089,
"name": "Narvik, Nordland",
"formatted_address": "Narvik, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Narvik"
},
"to": {
"place_id": "I4D8E4EAC97614F2D",
"muid": "5588490690794442541",
"poi_category": "PublicTransport",
"latitude": 68.2340015,
"longitude": 14.551482,
"name": "Svolvær, Nordland",
"formatted_address": "Svolvær, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Svolvær"
},
"line_width": 3,
"stroke_color": "#0099ff"
},
{
"place_id": "I4D8E4EAC97614F2D",
"muid": "5588490690794442541",
"poi_category": "PublicTransport",
"latitude": 68.2340015,
"longitude": 14.551482,
"name": "Svolvær, Nordland",
"formatted_address": "Svolvær, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Svolvær"
},
{
"type": "route",
"from": {
"place_id": "I4D8E4EAC97614F2D",
"muid": "5588490690794442541",
"poi_category": "PublicTransport",
"latitude": 68.2340015,
"longitude": 14.551482,
"name": "Svolvær, Nordland",
"formatted_address": "Svolvær, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Nordland",
"administrative_area_code": "18",
"locality": "Svolvær"
},
"to": {
"place_id": "I4DD53FDAD42236A1",
"muid": "5608459120054253217",
"poi_category": "PublicTransport",
"latitude": 67.8685765,
"longitude": 20.1987718,
"name": "Kiruna, Norrbotten County",
"formatted_address": "Kiruna, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"locality": "Kiruna"
},
"line_width": 3,
"stroke_color": "#9900ff"
},
{
"place_id": "I4DD53FDAD42236A1",
"muid": "5608459120054253217",
"poi_category": "PublicTransport",
"latitude": 67.8685765,
"longitude": 20.1987718,
"name": "Kiruna, Norrbotten County",
"formatted_address": "Kiruna, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"locality": "Kiruna"
},
{
"type": "route",
"from": {
"place_id": "I4DD53FDAD42236A1",
"muid": "5608459120054253217",
"poi_category": "PublicTransport",
"latitude": 67.8685765,
"longitude": 20.1987718,
"name": "Kiruna, Norrbotten County",
"formatted_address": "Kiruna, Sweden",
"country": "Sweden",
"country_code": "SE",
"administrative_area": "Norrbotten County",
"locality": "Kiruna"
},
"to": {
"place_id": "IF835CAFD3609F7A4",
"muid": "17885424684053952420",
"poi_category": "PublicTransport",
"latitude": 65.0102148,
"longitude": 25.4828016,
"name": "Oulu, North Ostrobothnia",
"formatted_address": "Oulu, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "North Ostrobothnia",
"locality": "Oulu"
},
"line_width": 3,
"stroke_color": "#33cc33"
},
{
"place_id": "IF835CAFD3609F7A4",
"muid": "17885424684053952420",
"poi_category": "PublicTransport",
"latitude": 65.0102148,
"longitude": 25.4828016,
"name": "Oulu, North Ostrobothnia",
"formatted_address": "Oulu, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "North Ostrobothnia",
"locality": "Oulu"
},
{
"type": "route",
"from": {
"place_id": "IF835CAFD3609F7A4",
"muid": "17885424684053952420",
"poi_category": "PublicTransport",
"latitude": 65.0102148,
"longitude": 25.4828016,
"name": "Oulu, North Ostrobothnia",
"formatted_address": "Oulu, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "North Ostrobothnia",
"locality": "Oulu"
},
"to": {
"place_id": "I3290CEFE55435F49",
"muid": "3643639690290224969",
"poi_category": "PublicTransport",
"latitude": 66.4980335,
"longitude": 25.7026932,
"name": "Rovaniemi, Lapland",
"formatted_address": "Rovaniemi, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "Lapland",
"locality": "Rovaniemi"
},
"line_width": 3,
"stroke_color": "#ffcc00"
},
{
"place_id": "I3290CEFE55435F49",
"muid": "3643639690290224969",
"poi_category": "PublicTransport",
"latitude": 66.4980335,
"longitude": 25.7026932,
"name": "Rovaniemi, Lapland",
"formatted_address": "Rovaniemi, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "Lapland",
"locality": "Rovaniemi"
},
{
"type": "route",
"from": {
"place_id": "I3290CEFE55435F49",
"muid": "3643639690290224969",
"poi_category": "PublicTransport",
"latitude": 66.4980335,
"longitude": 25.7026932,
"name": "Rovaniemi, Lapland",
"formatted_address": "Rovaniemi, Finland",
"country": "Finland",
"country_code": "FI",
"administrative_area": "Lapland",
"locality": "Rovaniemi"
},
"to": {
"muid": "15537753109082693582",
"latitude": 69.7258084,
"longitude": 30.0526379,
"name": "Kirkenes, Troms og Finnmark",
"formatted_address": "Kirkenes, Sør-Varanger Municipality, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Troms og Finnmark",
"locality": "Kirkenes"
},
"line_width": 3,
"stroke_color": "#00cccc"
},
{
"muid": "15537753109082693582",
"latitude": 69.7258084,
"longitude": 30.0526379,
"name": "Kirkenes, Troms og Finnmark",
"formatted_address": "Kirkenes, Sør-Varanger Municipality, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Troms og Finnmark",
"locality": "Kirkenes"
},
{
"type": "route",
"method": "path",
"from": {
"muid": "15537753109082693582",
"latitude": 69.7258084,
"longitude": 30.0526379,
"name": "Kirkenes, Troms og Finnmark",
"formatted_address": "Kirkenes, Sør-Varanger Municipality, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Troms og Finnmark",
"locality": "Kirkenes"
},
"to": {
"muid": "1888415693493108354",
"latitude": 60.3931425,
"longitude": 5.3213713,
"name": "Bergen, Vestland",
"formatted_address": "Bergen, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Vestland",
"locality": "Bergen"
},
"line_width": 3,
"stroke_color": "#cc0000",
"way_points": [
{
"latitude": 71,
"longitude": 31
},
{
"latitude": 70,
"longitude": 15
},
{
"latitude": 62,
"longitude": 4
}
]
},
{
"muid": "1888415693493108354",
"latitude": 60.3931425,
"longitude": 5.3213713,
"name": "Bergen, Vestland",
"formatted_address": "Bergen, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Vestland",
"locality": "Bergen"
},
{
"type": "route",
"from": {
"muid": "1888415693493108354",
"latitude": 60.3931425,
"longitude": 5.3213713,
"name": "Bergen, Vestland",
"formatted_address": "Bergen, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Vestland",
"locality": "Bergen"
},
"to": {
"muid": "18316975078019734711",
"latitude": 59.9164997,
"longitude": 10.7384202,
"name": "Oslo, Oslo",
"formatted_address": "Oslo, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Oslo",
"locality": "Oslo"
},
"line_width": 3,
"stroke_color": "#6600cc"
},
{
"muid": "18316975078019734711",
"latitude": 59.9164997,
"longitude": 10.7384202,
"name": "Oslo, Oslo",
"formatted_address": "Oslo, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Oslo",
"locality": "Oslo"
},
{
"type": "route",
"method": "path",
"from": {
"muid": "18316975078019734711",
"latitude": 59.9164997,
"longitude": 10.7384202,
"name": "Oslo, Oslo",
"formatted_address": "Oslo, Norway",
"country": "Norway",
"country_code": "NO",
"administrative_area": "Oslo",
"locality": "Oslo"
},
"to": {
"muid": "18366846785603624515",
"latitude": 51.5033768,
"longitude": -0.0795183,
"name": "London, England",
"formatted_address": "London, England",
"country": "United Kingdom",
"country_code": "GB",
"administrative_area": "England",
"locality": "London"
},
"line_width": 3,
"stroke_color": "#ff6600"
},
{
"muid": "18366846785603624515",
"latitude": 51.5033768,
"longitude": -0.0795183,
"name": "London, England",
"formatted_address": "London, England",
"country": "United Kingdom",
"country_code": "GB",
"administrative_area": "England",
"locality": "London"
}
] Popover Example
The Lox
Loading Map
Component Documentation
Component Name
Location
Builder Function Name
create_location_manager
Description
Displays a static map (using Apple MapKit) pinned to a specific location. Optionally in a popover or inline.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | object or null | Location data: { latitude, longitude, place_id, name, etc. } | |
| height | number or null | Height of the map in rem. Defaults to 'min(40rem, 50vh)' if not set. | |
| width | number or null | Width of the map in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set. | |
| is_popover | boolean | false | If true, displays the map in a popover triggered by a button. Otherwise, it's shown directly. |
| is_inline | boolean | true | If true and is_popover is also true, shows an inline button + text plus a popover. If false, hides the inline portion and you must open popover manually. |
| is_dark_color_scheme | boolean | true | Determines map color scheme (dark or light). |
| mapkit_js_token | string or null | Apple MapKit JS token required for loading the map. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes state and sets up popover and token for MapKit. Called once with the config. | No Params | |
| initialize_map | Loads MapKit script (if needed) and creates the map inside `#map_{id}` with the current location. Called automatically onMount or by user if needed. | No Params | |
| set_val | Updates the `val` location data object and re-initializes the map if loaded. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | object or null | Current location data object. Setting val triggers a map re-initialization if map is loaded. |
| map | object or null | Reference to the underlying mapkit.Map instance once initialized. |
| popover_manager | object | Popover manager for showing/hiding the map if is_popover is true. |
| toggle_popover_manager | object | Button manager that toggles the popover if is_popover is true. |
