Enriching maps with widgets

“Widgets provide configurable interface components to gain deeper insights into data”

Maps are typically used to relay specific aspects of data to users but may be limited in their ability to do so if they are constrained to using only spatial elements. GeoNode map widgets provide spatially aware data visualization components for the representation of non-spatial aspects of the data present in the map. The widget configuration is stored within the GeoNode map and once the map is saved it may be shared with the included widgets added to the interface. This makes widgets a powerful data visualization tool and can be used to create preconfigured dashboard-type interfaces using GeoNode maps.

Widget components may be of various types, including some of the following:

  • Charts: charts of various types including bar, line, and pie charts with support for multiple fields and mathematical operators
  • Text: rich text element which can be used to add a range of information to the map interface, including title or label positions, license information, images, or links to other web resources
  • Table: a customizable version of the attribute table for identifying subsets of features in a clear and concise way
  • Counter: a tally widget that supports multiple mathematical operators, including count, sum, or average

These widgets are useful for qualitatively and quantitatively describing and visualizing data available from within the map. Widgets utilize the underlying data from a particular layer and it's attribute values, and are spatially aware. This means that by default, the data used within the widget will filter features to utilize only the features that fall within the bounds of the current map extent.

Note that the spatial awareness is defined by widget connections between the map frame and the widget, but is entirely optional. In addition, widgets feature additional filtering methods, which support spatial filtering criteria as well as attribute-based filters. This ensures that comparative insights can be achieved for a wide variety of use cases, and tailored projects can be produced on-demand for various audiences.

You try:

Goal: To learn the basics of creating map widget

  • Load a map project that has some relevant vector data
  • Select your layer from the table of contents and use the Create Widget button (it should be represented by a bar chart at the far right of the layer controls toolbar)
  • Create a new chart widget. You could start with a bar chart and use an identifier, such as a class or name attribute field, for the x-axis and a count of the fid (or other numerical operation) for the y-axis
  • Note how the Next option from the chart toolbar becomes available only once there are valid configuration settings
  • Change additional widget settings and use the next option to specify the (optional) widget title and description
  • Use the save button to add the widget to the map. Experiment with moving and reconfiguring your widget.
  • Try to add additional widgets of various types to your map.

Check your results

Did you try creating the available widgets for different data types such as raster layers? What happened if you did?
Did you manage to create a widget of each available type and experiment with their functionalities?
Did you manage to zoom in and out and view the spatial filtering options? Have you tried to create a widget which is not limited by the map extent?
Did you try an advanced exercise such as disabling the spatial extent filter of the widget, but define a spatial filter using other means?
Did you experiment with layout options such as resizing and pinning items? What limitations were you able to identify if any?
Did you manage to minimize and restore multiple widgets from the widget tray?
Did you try adding multiple widgets of the same type, but with different data and styles for comparative results?

Getting the most from map widgets

Each widget is represented on a "floating panel" or frame, which supports various interactions, including:

  • Edit and delete functions
  • Repositioning the widget frame via dragging
  • Dynamic resizing of the panel (and it's child elements, including font size)
  • Pinning the frame to the current location
  • Collapsing (minimizing) to the map widget tray

Depending on the widget type, this functionality may extend to a number of additional features including saving the widget output as an image or downloading the raw data used to create the widget result.

The map widget tray may be the most critical feature of all as it allows users to declutter the interface without losing any of the widget configuration settings. Proper use of the pinning functionality will help a great deal when it comes to the creation of dashboards which help to highlight critical data insights, whilst allowing users to dynamically maneuver floating widgets allows them to prevent widgets from obscuring spatial data. Learning when it is best to leverage these functions to ensure a clean but extensible map application that serves a particular function well is a useful skill for content creators. Be sure to pay attention to each widgets configuration, and attempt to save the map with a particular set of widgets open and others minimized to the widget tray. The map will be saved with this configuration and this will help your audience identify which elements contain pertinent information.

Effective use of charts*

The charts widget supports various chart types, including:

  • Bar chart
  • Pie Chart
  • Line chart

The creation of each widget depends on the attributes available for the chosen layer. It is important for a user to study the attribute table before deciding on what type of chart is best suited to represent the desired data.

  • Bar Charts are used when the attributes of the layer are quantitative and you need to compare some related attributes from the layer. A bar chart is usually created by displaying an category or identification field on one axis, and a count, number, or ratio field on the other axis. The length of each bar will represent the value of each category.
  • Pie charts are useful for illustrating how individual parts contribute to an overall whole set. They help most when there are only a few categories and are displayed as a circle divided into sections according to category, with the sector size of each category being proportional to the percentage it represents.
  • Line charts consist of one or more lines connecting successive attribute values. Line graphs are useful for showing how things change or move over time and what the trends.