location

the location component enables users to display a location on a map within a {{jig}} it can be configured to appear in different formats, including the standard component layout, the jig header, or fullscreen mode additionally, display options can be set up to show the current location with markers or paths configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options options address the actual address of the location valid formats are \ address string city, street , e g address 20 w 34th st , new york, ny 10001, usa or in an expression calling a datasource =@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country latitude and longitude , e g address 40 759412, 73 912306 is animationdisabled true or false to determine if map animation is disabled isfollowuserlocationenabled when enabled, the viewpoint will be centred on the user’s real time location markers multiple markers can be configured to display on the map there is a 10k limit for markers showing on the map for example type component location options markers data \ latitude 40 759412 longitude 73 912306 \ latitude 40 745368 longitude 74 057189 \ latitude 40 76479429122513 longitude 73 97429291692742 you can use an expression to provide the latitude and longitude points from a datasource, for example markers data | \=@ctx datasources jobs {"lng" $number($ lng), "lat" $number($ lat)} marker item anchorto anchor the marker to a specific point, either bottom center or center radius display a circle around the marker in the radius you can configure the color , unit (default is kilometres) icon choose an icon for the markers you can style the icon color , emphasis , type , shape and size paths create one path from many points the first point is the start destination, and the last is the end destination there is a 10k limit for paths showing on the map for example type component location options paths data \ latitude 40 759412 longitude 73 912306 \ latitude 40 803495 longitude 73 950694 address =@ctx datasources location\[0] address viewpoint controls the visible area of the map, defining what the user sees it allows control over position, zoom and orientation options include centerposition middle or top zoomlevel defines the initial zoom level of the map zooming in enlarges the view, revealing finer details, improving readability, and enhancing location precision action open map docid\ kjtulf8eehjfznje k3p4 the action open map lets you open your device's default map app (e g , google maps, apple maps, or waze) with the provided destination address if multiple map apps are available, they will be listed for you to select one state configuration key notes =@ctx component state location state is the variable of the component system variable configuration key notes =@ctx system locationpermisions foreground isgranted status determines the status of the permissions and evaluates if permissions are granted see jigx variables docid\ y99tktesrqe0cg7jrd iw example =@ctx system geolocation coords timestamp see jigx variables docid\ y99tktesrqe0cg7jrd iw example considerations test the layout of the location component when combining it with other components, as it can cause spacing issues to display a location as a full screen, use the jig fullscreen docid\ yta vtj4gfh6w2wd xgnb type with the component location see the fullscreen location example down below examples and code snippets examples and code snippets location using address an interactive map displaying the location using the address examples see the example using static data on github see the example using dynamic data on github datasource see the full datasource for static data on github see the full datasource for dynamic data in github location (static) type component location options viewpoint centerposition middle address 768 5th ave, new york, us zoomlevel 14 \# add a pin to the exact address markers data =@ctx datasources address item type component marker item options address =@ctx datasources address street children type component icon options color negative icon pin 1 map location (dynamic) type component location options viewpoint centerposition middle address =@ctx datasources location address us zoomlevel 14 \# add a pin to the exact address markers data =@ctx datasources location address us item type component marker item options address =@ctx datasources location address us children type component icon options color negative icon pin 1 map datasources (dynamic) datasources location type datasource sqlite options provider data provider dynamic entities \ entity default/location query | select '$ id', '$ address', '$ address us', '$ category', '$ lat', '$ lng' from \[default/location] where '$ category' = "location" datasources (static) datasources address type datasource static options data \ street 768 5th ave city new york country us location using latitude and longitude in this example a location is shown using the latitude and longitude coordinates in the address property location lat lng jigx children \ type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# specify the address using latitude and longitude latitude =@ctx datasources appointments\[0] latitude longitude =@ctx datasources appointments\[0] longitude \# add endpoint marker icon for the address markers data =@ctx datasources appointments\[0] item type component marker item options latitude =@ctx current item latitude longitude =@ctx current item longitude children type component icon options color negative icon pin 1 map datasource datasources appointments type datasource static options data \ id 1 name empire state building latitude 40 748676182418976 longitude 73 98567513213604 address 20 w 34th st , new york, ny 10001, united states icon home \ id 2 name great lawn softball field 6 latitude 40 782091612607864 longitude 73 9655512166898 address 86th st transverse, new york, ny 10024, united states icon stadium 1 building location with multiple markers an interactive map displaying multiple points examples see the example using static data in github datasources see the full datasource for static data in github location multiple markers (static) children \ type component location options viewpoint address | \=@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country \# use a datasource to define the multiple markers markers data =@ctx datasources points datasources (static) datasources \# first datasource with address address type datasource static options data \ id 1 street 768 5th ave city new york country us \# second datasource for points in latitude and longitude points type datasource static options data \ latitude 40 759412 longitude 73 912306 \ latitude 40 745368 longitude 74 057189 \ latitude 40 76479429122513 longitude 73 97429291692742 location displaying paths an interactive map displaying a path with three points, a starting point, middle and end point, with a marker item at each point examples see the example using static data in github datasources see the full datasource for static data in github location path (static no animation) type component location options viewpoint \# starting address specified centerposition middle latitude 40 759412 longitude 73 912306 isanimationenabled false zoomlevel 9 \# add icon markers for the addresses markers data =@ctx datasources points item type component marker item options latitude =@ctx current item latitude longitude =@ctx current item longitude children type component icon options icon end marker \# paths defined in a datasource in latitude and longitude paths data =@ctx datasources points location path (static with animation) children \ type component location options markers data =@ctx datasources points item type component marker item options latitude =@ctx current item latitude longitude =@ctx current item longitude children type component icon options icon end marker paths data =@ctx datasources points viewpoint centerposition middle latitude 40 759412 longitude 73 912306 isanimationenabled true zoomlevel 9 datasources (static) datasources coordinates type datasource static options data \ id 1 latitude 40 769702 longitude 74 038241 \ id 2 latitude 40 759412 longitude 73 912306 \ id 3 latitude 40 803495 longitude 73 950694 location radius this example demonstrates how to add a circular radius around the specified location determine whether it is in kilometers or miles and set its size ( value ) then, select the color of the radius location radius jigx title location with radius type jig default children \ type component location options viewpoint \# starting address specified centerposition middle latitude 40 759412 longitude 73 912306 address =@ctx datasources points \# add the marker point that the radius will use as the center point markers data =@ctx datasources points item type component marker item options latitude =@ctx current item latitude longitude =@ctx current item longitude \# specify the radius units, size (value) and color radius isenabled true \# the value determines the radius circle, e g 4km value 4 unit kilometers color color4 children type component icon options icon end marker datasource datasources points type datasource static options data \ latitude 40 759412 longitude 73 912306 location full screen in this example the component location is used in the jig fullscreen ensuring the map covers the entire {{jig}} examples see the example using dynamic data in github datasource see the full datasource for dynamic data in github using the code below requires data in the database, the jigx sample solution has the data provided for location you can use the location csv file in github and upload it via the data docid 5w2tlpzbxlebboq83bzb configuration in {{jigxmanagement}} location fullscreen jigx title location fullscreen type jig full screen component type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# specify the address using latitude and longitude address =@ctx datasources address\[0] street \# zoom in to enlarge the view, reveal finer details, improving readability, \# and enhance location precision zoomlevel 14 \# add endpoint marker icon for the address markers data =@ctx datasources address\[0] street item type component marker item options address =@ctx datasources address\[0] street children type component icon options \# determine the size of the marker icon size large icon end marker datasources datasources address type datasource static options data \ id 1 street 768 5th ave city new york country us \ id 2 street 137 w 111th st city new york country us location as a header the location component can be used as a small or medium size header in a {{jig}} in the screenshot the difference between the set heights is shown examples see the code samples using static data in github for small and medium headers location as header(small) header type component jig header options height small children type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# sepcify the address using a datasource address =@ctx datasources sites\[0] address \# zoom in for map clearly zoomlevel 8 \# add endpoint marker icon for the address markers data =@ctx datasources sites\[0] address item type component marker item options address =@ctx datasources sites\[0] address children type component icon options \# determine the color of the marker icon color negative \# define the icon in the datasource icon =@ctx datasources sites\[0] icon location as header(medium) header type component jig header options height medium children type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# sepcify the address using a datasource address =@ctx datasources sites\[0] address \# zoom in for map clearly zoomlevel 8 \# add endpoint marker icon for the address markers data =@ctx datasources sites\[0] address item type component marker item options address =@ctx datasources sites\[0] address children type component icon options \# determine the color of the marker icon color negative \# define the icon in the datasource icon =@ctx datasources sites\[0] icon datasource datasources sites type datasource static options data \ id 1 name empire state building latitude 40 748676182418976 longitude 73 98567513213604 address 20 w 34th st , new york, ny 10001, united states icon landmark empire state \ id 2 name great lawn softball field 6 latitude 40 782091612607864 longitude 73 9655512166898 address 86th st transverse, new york, ny 10024, united states icon stadium 1 building see also state docid 0js3trstyj4kcu6vviv1y