Recently, I stumbled across a scenario of trying to use system coordinates to populate paths- or markersData for the location component.
First thing worth mentioning is that when you want to set up either paths- or markersData, you have two options:
- Defining the coordinates statically (i.e. specifying your coordinates upfront)
- Reading coordinates from some source, either a datasource, system coordinates (or a combination thereof for the more bold ones among us - more on this later).
It’s important to note that you can’t set it up using both of these options in your YAML. It will present you with an error.
CODE SAMPLES OF THE ABOVE OPTIONS
Below is an example of pre-defined points, using static input:
- type: component.location
options:
markersData:
- lat: -26.673611
lng: 27.931944
- lat: -26.7167
lng: 27.1000
- lat: -27.644606
lng: 27.250900
Next, we will look at how you will structure your expressions to get the various coordinates from your selected source. Remember that lat and lng coordinates are required in your source and if you don’t have those exact properties in your source, you should map your datasource properties to those two properties like in this example of the location component and its datasource:
- type: component.location
options:
markersData: =@ctx.datasources.points.{'lat':latitude, 'lng':longitude}[]
datasources:
points:
type: datasource.static
options:
data:
- latitude: -26.673611
longitude: 27.931944
- latitude: -26.7167
longitude: 27.1000
- latitude: -27.644606
longitude: 27.250900
BUT…
WHAT IF I WANT TO ADD STATIC VALUES AND USE MY CURRENT LOCATION??
Take note that the static input only allows numbers and you are not able to map expressions to those properties.
With that being said, this specific way of setting up a scenario to map your current location with other static coordinates would not work.
What if there is another way to get the best of both worlds?
For this, you would map the static input in a datasource (similar to the datasource example above) and you could use a jsonata expression like $append to get the results from the datasource and the system coordinates.
- type: component.location
options:
markersData: =$append(@ctx.datasources.points.{'lat':latitude, 'lng':longitude}[],@ctx.system.geolocation.coords.{'lat':latitude, 'lng':longitude}[])
This would then return your current location and your specified points all on the same map!
It goes without saying that by following the same rules / guidelines, you could achieve this with multiple sources, whether system coordinates, static input or other forms of data.
The world (and it’s maps) is your oyster!
Here’s a peak of what it would look like following this and applying it to pathsData, markersData or both. For your ease of use, I’m attaching you the full code of this sample too 
title: The roads less travelled...
type: jig.default
header:
type: component.jig-header
options:
height: small
children:
type: component.image
options:
source:
uri: https://quotefancy.com/media/wallpaper/3840x2160/89670-Dr-Seuss-Quote-Oh-the-places-you-ll-go-There-is-fun-to-be-done.jpg
datasources:
points:
type: datasource.static
options:
data:
- lat: -26.673611
lng: 27.931944
- lat: -26.7167
lng: 27.1000
- lat: -27.644606
lng: 27.250900
children:
- type: component.location
options:
markersData: =$append(@ctx.datasources.points.{'lat':lat, 'lng':lng}[],@ctx.system.geolocation.coords.{'lat':latitude, 'lng':longitude}[])
- type: component.location
options:
pathsData: =$append(@ctx.datasources.points.{'lat':lat, 'lng':lng}[],@ctx.system.geolocation.coords.{'lat':latitude, 'lng':longitude}[])
- type: component.location
options:
pathsData: =$append(@ctx.datasources.points.{'lat':lat, 'lng':lng}[],@ctx.system.geolocation.coords.{'lat':latitude, 'lng':longitude}[])
markersData: =$append(@ctx.datasources.points.{'lat':lat, 'lng':lng}[],@ctx.system.geolocation.coords.{'lat':latitude, 'lng':longitude}[])
