Create visualization for a Map Feature Image Gallery

[Nightsphere]

A dialog needs to be created showing images for a layer, where data is retrieved from a configuration file with paths to each image, and a string description of each to be displayed along with them. The way this is created could be used in either an event, or some other way like having it be an option in the layer kebab menu.

[Nightsphere]

After some work, I've implemented two different ways of creating and displaying the Image Gallery. The first is an event action, which can be added as an event object in the template file actions array like so:

Option 1: Event Driven

"actions": [
    {
      "action" : "displayGallery",
      "group":  "Map Gallery",
      "label" : "Gallery",
      "resourcePath" : "../../data-ts/gallery-template.csv"
    }
  ]

When a feature is clicked, the button will show Gallery. When the Gallery button is clicked, it will read from the gallery template file (relative to where the template file is located, or an absolute path) and use its data.

Right now, only CSV files are being used, and the headers must be named imageGallery and description like so:

imagePath,description
path/to/image1.png,This is a beautiful river
path/to/image2.png,"Since this sentence has a comma in it, it needs double quotes around it"

Using this option, the labeling for each feature is a number and given in the order they were created. I haven't found a way to override this with a user-created string. It should also be noted that this only works for the symbolImage property marker, and not the builtinSymbolImage property as of yet.

Lastly, the imageGallery property must have some value (more than an empty string) for each feature tooltip to be created, since the Leaflet map layer is created before the event takes place. Here is an example of what it can look like:

"geoLayerViews": [
    {
     "geoLayerViewId": "reservoir-layer-event-view",
     "name": "Reservoirs",
     "description": "The Layer View for reservoir levels in District 1",
     "geoLayerId": "reservoir-levels-image-event-layer",
     "properties": {
        "imageGallery": "true",
        "refreshInterval": ""
      },
      "geoLayerSymbol": {
        "name": "Reservoir Layer View Symbol",
        "description": "The reservoir layer view symbol data",
        "classificationType": "SingleSymbol",
        "classificationAttribute": "The reservoir layer view symbol data",
        "properties": {
          "symbolImage": "/img/default-marker-25x41.png",
          "imageAnchorPoint": "Bottom"
        }
      },
      "eventHandlers": []
    }
]

Option 2: Kebab Menu

To enable showing the Image Gallery in the side bar layer kebab menu, the action object from the popup template actions array can be removed. The property imageGallery property in the geoLayerView can be changed with the path (relative to the map config file or absolute) to the gallery template CSV file mentioned above. Here is an example of the geoLayerView I used it on:

"imageGallery": "../../data-ts/gallery-template.csv"

Since the imageGallery property now has a path, the Image Gallery kebab menu will display, can be clicked on, and will begin with the first image in the gallery.

Option 3: Both Options Combined

The ability to have both a kebab menu and Leaflet popup button is possible. Simply follow the above instructions in order from Option 1 to Option 2. Essentially, both the resourcePath property in the popup template file and the imageGallery property in the geoLayerView will need to be the path to the same CSV template file. This way, Leaflet buttons can be clicked on and show the image of the feature shown, or the kebab menu can be clicked to start at the beginning of Gallery.

[smalers]

Here is my feedback. The mechanics of the tool need to work better before I can comment more on the user experience. I generally like where things are going. Everything we figure out here will apply to how Gapminder and a page gallery work. I could also see how this could work with a "dashboard" for a location, where the map is used to navigate the overall system and a popup dashboard provides specifics about that location.

General:

1. Change numbers to start at 1 for the auto-numbering.
2. Can the title of the window default to Image Gallery: Layer View Name? Then the default should be OK for kebab or event display. Later we can decide how to do a title property.
3. The kebab menu is really an alternative way to trigger an event to cause the image gallery to be displayed but much of the configuration is in the event so should use rather than repeating. Therefore, why not be more explicit in the linkage and for the layer view property use imageGalleryEventActionId: someId (see below for discussion of adding id to the event configuration). In other words, we are indicating that for the layer view an image gallery event is supported. The same thing could be done with gapminderEventActionId. It is a bit cumbersome but if documented people just need to follow. To enable the kebab menu, the code just needs to know that the property is defined. Does this work OK with the loading sequence for configuration files?
4. It would be great if the image gallery window could be resized. Sometimes it gets in the way.
5. The zoom to feature looks nice but if the image viewer window is large the window can obscure the location. See the comment on resizing the viewer. I wonder if the user repositions the map to view the feature if the relative location can be remembered and auto-scroll to the same relative offset? That is tricky though and might be more confusing behavior than always zooming and centering the map. Being able to resize the image gallery dialog would probably be easier for users.
6. There seems to be some vertical whitespace between scrolling thumbnail area and the Close button. Some vertical area might be needed if a longer description is shown (discussed below).
7. Maybe also need an attribution column in the image gallery data so attribution can be given for an image. Don't want the image viewer to be too cluttered, but need to give people credit.
8. Having to click on a feature on the map and then click on Image Gallery again is inefficient. It might be good to configure a way to only click on the marker and have it automatically go to the selected image. Or, allow a Ctrl-click or Shift-click to go to the image, would need to configure which action handled this. Also, this does not work well on mobile device so might need a way to "enable single click". This would require configuring in the kebab menu to start. This is related to overall event redesign where the top of the event configuration would also indicate whether hover or click event is enabled, and then actions is secondary event. So... probably need to wait a bit until the overall event configuration is reworked. It might look something like the following, but need to think it through with use cases. Do not implement these changes now.

"events": [
   {
      "eventType": "Hover",
      "layerAttributes": ...
   },
   {
       "eventType": "Click",
       "layerAttributes": ...
   }
]
"actions": [
]

Image gallery data file:

1. Clarify handling of relative paths. To be consistent with layers, I would make relative paths for the gallery configuration file and images relative to the map configuration file.
2. The configuration file needs to have a way to indicate the value of a feature attribute value to match. Typically this would be a short value rather than long name, but that depends on what identifiers are in the layer. How about a column name of value similar to classification files?
3. Maybe add a column name that would be short name to display in the viewer, and description would be longer text. Then could decide whether description is displayed in smaller font under the image name. Or have a way to show the description as a tooltip so it does not take up viewer space but users can get to it? I don't like having too many layers of UI so need to test. If a longer description is used in smaller font, this is close to having a page gallery.
4. Maybe the file needs a way to indicate if an image is small, medium, or large so it can be scaled appropriately? We would need rules for how to handle.

Event configuration file:

1. For actions, add id, name, and description similar to other configuration data. These could be used if a UI is developed to edit the data. The id is the main one (see comment in first section above). The others are useful to make the configuration file more readable as to what an action does.
2. Change action value from displayGallery to displayImageGallery and should ignore case when checked - might document as DisplayGallery similar to other mixed case values. Since the events are configured on a layer, and interaction with features are what normally trigger events, there is no need for layer or feature in the property name. This will allow displayPageGallery or similar to be enabled.
3. Use the id to match the imageGalleryEventActionId property in the geolayerview properties, to allow the kebab menu setup to reference the corresponding event action rather than assuming configuration.
4. If group is not used, then don't require in the configuration. Maybe this was going to be used to link to GeoLayerViewGroup? We can revisit this later. Document as a possible property. There may be a need to have kebab menu at group level when a visualization involves multiple layers but even in that situation there might be a primary layer so everything we are doing now would make sense.
5. resourcePath is fine, make sure that it is relative to the map configuration file.
6. Should we add a general properties element within an action to allow more free-form information to be specified? Or keep it flat and just allow more configuration properties to be added as needed at the same level? Maybe keep flat for now to avoid complexity in the file since hand-edited. Each visualization will just need to handle a few specific properties.
7. Need a property like imageGalleryAttribute that would be the attribute in the layer whose values are matched to value column data in the image gallery configuration file. This would be similar to the classificationAttribute used with classification files. When enabled, the numbers can still be auto-generated but use the attribute to match.
8. Need a property to indicate how features are labeled such as featureLabelType with value of FeatureNumber or AttributeValue. Default would be FeatureNumber as shown.
9. Consider a property featureLabelFormat that would be used if featureLabelType=AttributeValue and allow specifying the format of the feature tooltip label and allow one or more attribute values to be formatted, possibly with modifier functions. This can be a enabled later.
10. Maybe have a property title for the dialog title if default is not used?
11. If only want in the kebab menu, maybe don't define label, in which case no button will be added and therefore no action take on a feature?
12. A more advanced feature would be: If there are more than one image at a location (because imageGalleryAttribute value matches more than one row in the csv file value column), add those to the image gallery also? That way we could support multiple images at a location. The order would need to be decided and be predictable, such as order in the configuration file. The number would then be the number of features on the map, not sequential number of images.
13. Evaluate whether the description in the configuration file should be displayed for the image rather than shorter name. For example, label the image with Label: Name on one line and description under in smaller font?
14. Is it possible for the image gallery configuration file to be a URL to allow all of the image content to be hosted elsewhere and if so, how would files (not URLs) be handled in that file? Code would need to piece together the parent folder of the URL with the image filename to create a full URL.

[Nightsphere]

New changes have been merged. The InfoMapper will create and display the Image Gallery Kebab menu option when the geoLayerView property imageGalleryEventActionId exists. The gallery template CSV file will need to be created as well still.

For dislaying an event driven Image Gallery, the action string needed in the popup template file has been changed from displayGallery to displayImageGallery. The InfoMapper determines whether to create an event button based on if the action string is displayImageGallery, and will default to showing numbers on the label.

The action property featureLabelType can be used to tell it to use another user-defined label in the future, but will only default for the moment. This can be explicitly set as "featurelabelType": "FeatureNumber" or left off entirely.

An action property imageGalleryAttribute has been added, as described earlier. This is what feature property will compare to the value column in the CSV popup template file when creating each tooltip. For example, the CSV would look like this:

imagePath,description,value
../../img/cache_la_poudre.jpg,"Halligan Reservoir.",6016140

and the action would contain:

"actions": [
  {
    "action": "displayImageGallery",
    "imageGalleryAttribute": "ID"
  }
]

The InfoMapper would compare feature.ID to csv.value.