Interacting with my farm map

Owned by Lite Farm
Last updated: Nov 29, 2022
4 min read

When it comes to interacting with the https://lite-farm.atlassian.net/wiki/spaces/LITEFARM/pages/658178056 on a farm map, there are some interaction guidelines we can put in place that will make the experience more fluid for a user. First, we’ll define the types of possible interactions. Next, we’ll discuss selecting specific locations and some edge cases for these types of interactions.

Types of interactions

For the spring 2021 release, we will support four types of interactions directly on the map:

  1. Tap and hold and drag (on mobile) / Click and hold and drag (on computer) to allow dragging the map around the held point (this is standard for Google maps)

  2. Pinch (on mobile) / Scroll out (on computer) to zoom out from the centre point of the pinch motion (this is standard for Google maps)

  3. Spread (on mobile) / Double tap / Double click / Scroll in (on computer) to zoom in from the centre point of the spread motion (this is standard for Google maps)

  4. Single tap (on mobile) / single click (on computer) to select the tapped location. If a location is selected, a single tap should unselect it.

  5. Long tap (on mobile) / long click (on computer) to preview the long tapped location - if there’s a preview associated with that location.

 

Selecting locations on the map

When selecting a location on a map by single tapping or clicking it, there are a few use cases for what location becomes selected.

  1. If there are no location where the user clicks or only a farm site boundary**, take no action

  2. If there is only one location - or only one location and a farm site boundary** - the (non farm site boundary) location becomes selected

  3. If there are 2 or more locations that overlap, but one of them is a point, the point becomes selected

  4. If there are 2 or more locations that overlap, and 2 or more of them are points, a pop-up will appear showing all overlapping points for that selection. The user can then select the point of their choice by clicking on it, or dismiss the location by clicking outside the pop-up.

  5. If there are 2 or more locations that overlap, and either two or more or none of them are points, a pop-up will appear showing all overlapping locations for that selection (see image below). The user can then select the location of their choice by clicking on it, or dismiss the location by clicking outside the pop-up.

For details on what happens once a user selects a location, you can read through the location specific stories in https://lite-farm.atlassian.net/browse/LF-1018.

** A quick aside, for the purposes of selecting, farm site boundaries are considered to be hollow. That is, they can only be selected by clicking on the border of the farm site boundary.

 

Clusters

Clusters appear when the map is zoomed out far enough that points are too small and close together to be able to easily select. A cluster will show up as a numbered square on the map (pictured below). The number signifies the number of points that are part of the cluster. For clusters that include 5 or more points a “5+” will display.

The clustering functionality mainly follows this algorithm: https://developers.google.com/maps/documentation/javascript/marker-clustering

On selection:

When a cluster is clicked, the map will zoom into the cluster where:

  1. The zoom in will be close enough where the cluster icon is no longer necessary and the individual points can be selected.

  2. The cluster will break up into clusters (Ex. a cluster of 4 will break into two clusters of 2 once zoomed in). These clusters can then be selected to zoom in further.

  3. If the map reaches the maximum zoom level and points are still overlapping, then selecting a cluster will prompt a pop-up interaction (shown above).

 

 

In situations where a clustered location can also be previewed, long selecting one of the pop-up selections will dismiss that pop-up and show the preview pop-up.

Previewing locations

Certain locations will have a “preview” behaviour associated with them. A preview is activated by doing a long select on that location. For example, the preview associated with a sensor location is shown below. Requirements for previews by location will be defined for that location, but in general will be limited to one label, value, and unit.