Map Component
The Mapping component can visualize geographical data and provide additional insight based on the geographical area. In Akuko, maps are created using layers, similar to ArcGIS or Mapbox. If you are familiar with this type of mapping, you should feel right at home.
To start off, you will need to set up your respective data sources and their geometries, whether longitudinal/latitudinal point data or joined shapefile data. Just like any other post components, click the plus icon and select the Map option. This loads an empty version of the world map.
You are now ready to start populating the map. There are generally two types of location data sources:
- Point data - Columns for longitude and latitude data
- General location data - location data can include names of towns, states, cities, provinces or any other administrative level or other key location information to be visualized on the map
For point data, you should have a column for longitude and latitude coordinates. Each row should be a single location like a health facility, school church, etc. To update your map, put the post the component in Edit mode, similarly to other components. You can start by giving your map a title and caption (optional) under the Settings section.
In the Layout section, set the height, styling, and zoom of your map. The default height is 400, which should be suitable for most maps, but you can adjust to suit your needs. There are several map styles: styles available in MapBox, Custom style URL, and No Style. The default is a map with a white background and grey elements for landmasses. You will need to include the URL of the Custom style designed using Mapbox, if Custom style URL is selected. The default zoom is 2, but you can adjust the zoom to to suit your needs.
In the Layers section, you can add the different layers, or data to visualize on your map. Each layer is usually one data field, such as a specific type of locations (i.e. Churches, facilities, etc.) or type of data (i.e. status of health facility, malnutrition status, etc.). Click Add to add a layer, and click the plus (+) icon or arrow ( > ) icon to add specific columns. For our example, we are visualizing Chipotle locations, a restaurant chain, in the United States.
You can start by giving your layer a name, under Layer Name, to distinguish it from other layers. Then, define the data source from the Source dropdown. Under the Layer Geometry, select a geometry based on a list of geometries created for the data source. In our example, we only have one geometry, Chipotle locations geometry, under the Chipotle locations source.
The layer type defines how each data value will be displayed as a layer. You can use a circle, symbol, line, fill, or fill extrusion. For single points, a symbol or circle are used more frequently. A symbol, such as green cross for a pharmacy, works best when mapping structure and villages/cities. Circles works well when mapping single locations and assessing quantities, where larger quantities have larger circles and smaller quantities have smaller circles, such as the population of a city. Lines work well for geotraces, such as rivers or roads. For polygons, the fill or fill extrusion will work well, such as for data at the region or province level.
Example of circle layer type
A circle will appear for each point with a designated latitude and longitude. Once you select the Circle layer type, circles should populate your map. You can customize how the circles are displayed from the Style section.
You can use the Color Based On dropdown to color the circles differently based on the selected column. For example, if the data had a column with open and closed Chipotle locations, this column could be used to color circles as green for open locations and red for closed locations. Alternatively, you can leave the Color Based On section blank, and select a color in the Color section to color all circles uniformly.
You can set the radius of your circles based on a numerical column in your data. For example, if there was a column with the number of visitors per day per Chipotle locations, the column could be used to set the radius of the circles to give visual representation of visitors at each locations. Stores with more visitors would have larger circles, and stores with less visitors would have smaller circles. You can also change the size of the circle radius by entering a number or using the scrollbar. The circle radius size will depend on how many points are on your map and the zoom level of the map. You do not want the radius to be too big and circles significantly overlap with other circles appearing crowded.
Circle Opacity, Stroke and Blur
The Circle Opacity allows you to set the transparency of the circles. The opacity can range between 0 and 1. Leave the opacity at 1 if you only have a single layer. However, if you have multiple layers, you may want to reduce the opacity of circles to view other layers.
The Circle Stroke is a second circle surrounding your original circle. You can set the Circle Stroke Width, Circle Stroke Color, and Circle Stroke Opacity, similar to the circle. Circle strokes are useful where a map user may want to know a certain distance from a point and overlap, such as number of km to a health facility and how many health facilities have a radius overlap.
A Circle Blur creates a vignette-like appearance of your circles giving them a more artistic appearance. This option helps make your circles standout on an underlying map with other rounded items.
This layer type is similar to the circle layer type, except symbols are used to represent points. You can use common symbols to represent health facilities, rivers, churches, etc. The symbol layer type styling is slightly different.
Select the icon box, below Symbol, to reveal submenus of different symbols. Choose the symbol to add to the map and best represent the data point. You can use the search box to further refine your selection. Currently, the submenu includes symbols commonly used by OCHA, MAKI, and UNICEF, but the symbol library grows regularly. In our example, a food symbol was chosen to visualize Chipotle locations.
You can choose the symbol color, opacity and size, similarly to circles. The Allow Symbol Overlap, when selected, allow a users to regulate how many symbols appear on the map. When data points are close together, as in our example, we would recommend leaving this box unchecked because it will declutter the map and only show symbols appropriately according to the map zoom level.
If a data column has different labels for different points or classifies your data somehow, you can use the Symbol Based On to show different symbols for the different labels or data. Once you have selected your classifying column, add Symbol Categories, including a name and icon, for each classification. In our example, we want a different symbol for Chipotle locations in different states, and we will need to add a Symbol Category for each state.
Lines and polygons will require a different way of visualizing data. Adminstrative location data, such as districts, regions, and countries, are usually considered polygons, while environmental data, such as rivers and roads, are usually considered lines. After setting your data source geometry, add a layer, similar to point data, by naming and selecting your data source and selecting your preferred geometry. A line, fill or fill extrusion can be used for the layer type of this data.
A fill layer fills a polygon, or administrative area, with a selected color based on a selected column. There are two color methods: Interpolate and Custom.
Interpolate creates a color gradient based on a set minimum and maximum value and color. In our example, we visualized the number of deaths per state using a color gradient with a lowest value of 2 and highest of 65,000.
Custom allow you to set steps or categories of how you would like the data colored. You will need to add each step or category manually. In our example, we used steps, for numerical data, to show the different ranges of cases. We used a 500,000 step up to 4,000,000 and assigned colors to each step. You can create a similar output as the Interpolate option as shown below, but you can also further customize as desired.
The Fill Outline Color will create a border around your fill area with a certain color. By default, this color is grey, which works great for most maps.
The Line layer type shows the boundaries of the specified geometry. Under the Line Color, you can set the desired color for the boundary line. Select the thickness of the line under the Line Width.
The Line Dash Length and Line Gap Width settings are used in unison to create a dashed line appearance for the administrative boundaries.
You can use the Line Opacity setting to increase or decrease the visibility of the lines. The Color Based On dropdown allows you to color the lines differently based on a certain classifying columns, similar to the fill layer type.
The fill extrusion layer type is similar to the fill layer type. The major difference is how this layer type visualizes the data. In addition to the color gradient of the fill layer type, the fill extrusion has a height component creating a 3D-like appearance of the different boundaries based on selected values. After selecting the Fill Extrusion as the layer type, select the value the height of the administrative is based on in the Height Based On dropdown. In our example, the height of the different states is based on the number of COVID-19 cases.
The Height Method provide the method to provide the range for the high value of your extrusion. Currently, you can use Interpolate, which is similar to what is used in the fill layer type. The Height Min and Height Max values define how much the polygon should be raised.
Other than the layer type, you can also add other stylings to your layer, including adding a Popup, Labels, Filters, Controls and Layer grouping.
The Popup feature allows you add a small window to show specific information when the user clicks on the point data or polygon/line data.
Add the information you would like to appear in the popup, under the Popup section, and ensure you check the Enable Popup checkbox to see the changes on the map.
Ensure you reference column names with curly brackets
Labels allow you to add labels to your circles or fill areas. Each label element requires a Label Property, or the column giving the data point or polygon its label. You can also define the Font Family and Label Size. For our example, we used the State column to label each state on our map. We also set the Font Family to Serif Bold and the Label Size to 9, which is the recommended font and font size for most maps.
If the labels do not align properly with points, lines or polygons, you can use the Offset X and Offset Y to move your labels horizontally and vertically, respectively, by the desired amount. Be sure to use decimal values to move your labels around because whole numbers usually cause labels to be further offset than desired.
Use the Prefix and Suffix values to add units or descriptions to your labels. A common prefix value is $, used before cash amounts. Suffixes can range from % to KGS to Yards.
You can set your Label Color to Dark or Light, depending on how you need to differentiate it from your surrounding map.
Just like other components on Akuko, you can set your layer to only pull data from a subset of your data using filters. For more information, please see the Table section on filters.
A map can have multiple layers, which can be displayed collectively or separately. Select Enable Toggle to add a menu with a dropdown list where a user can select or unselected layers to visualize on the map accordingly.
Similarly, select Add To Menu to see the layers separately by adding the layers to the top of your map with a button layout.
Layer Group allows you to group layers together for organization. This feature is most useful to users who have created many layers on the same map and would like to keep track of them. You can create a mother layer and have all the children layers grouped under it for easier organization.
Last modified 6mo ago