# Map Layer
<flow-map-layer> A map layer is a visual rendering of geospatial data on a map.
Add a Map Layer sub-component to a map to define a map layer to display geospatial data from the data source specified by the layers source attribute.
Map layer types include:
fill- display filled polygon data.fill-extrusion- display extruded pseudo-3D polygon data.line- display line data or polygon outline data.circle- display point data as circles with variable radius and outline.symbol- display point data as text or icons.
See the Maplibre GL JS Style Specification (opens new window) for a full description of available layer types.
# Layer Styling
Layer styling is specified using a CSS-like language within the text content of the <flow-map-layer> element. The style specification is a set of property/value pairs delimited by a semicolon. Block comments (/* .... */) may also be included in the specification.
Supported style properties are specific to each layer type and can be found in the Layers section (opens new window) of the Maplibre GL JS Style Specification.
The value of a property is set using a Flo.w RDF reactive expression - a minimal JavaScript expression language with support for accessing feature properties and Flo.w RDF reactive state properties. Changes to reactive properties referenced in a map layer's style rules automatically trigger a re-painting of the map layer.
To access per-feature properties in style rules use the @propertyName notation. To access Flo.w RDF reactive properties from application state use the $propertyName notation.
The style language is a re-formulation of Maplibre GL JS style expressions (opens new window) into a JavaScript-like syntax. Any Maplibre GL 'function' of the form ['functionName', arg1, arg2, ...] can be expressed in a Flo.w RDF style expression as functionName(arg1, arg2, ...). All Flo.w RDF style expressions are converted to the equivalent Maplibre GL JS expression before setting the map style of the underlying Maplibre GL JS map.
/* Example style rules */
/* Literal string, number and hex-color values */
circle-radius: 10;
circle-color: red;
circle-color: 'red';
circle-color: "red";
circle-color: #eee;
circle-color: #ff8800;
/* Color functions */
line-color: rgb(128, 255, 0);
line-color: rgba(255, 255, 255, 0.5);
/* Accessing feature properties */
text-field: @name;
circle-radius: @value * 10;
/* Accessing reactive state properties */
circle-radius: @value * $magnifcationFactor;
visibility: in('layer1', $selectedLayers);
See Designing a Map (TBD) for full details.
# Layer Ordering
Map base layers and user-defined layers are drawn in the order in which they are specified in the final composite map style, with earlier layers being over-drawn by later layers. To provide a sensible default ordering, each base map style provides a set of 'insertion points' for user-defined layers. In general:
fill-type layers (polygons) layers are inserted above land-use layers in the base style but below building and transport layers.line-type layers are inserted above transport layers in the base style but below labels.symbol-type layers (icons and text) are inserted above all base layers.
User-defined layers of the same type are inserted in the same order that they are specified.
To insert a user-defined layer at a different point in the layer stack set the above or below attribute to a target map layer ID. For example, to override the default layer placement and insert a line layer below all transport layers of the Fjord map style:
<flow-map-layer below="tunnel_motorway_casing" ...>
Note that different base map styles have different base layers. To view the composite layers for a map and find a target layer for insertion, expand the 'Updating map style' debug output in the browser developer console.
# Interactivity
By default, map features on user-defined layers generate click events and display hover effects. To disable interactivity for a layer set the interactive attribute to false.
The details property of click events contains an array of all interactive features under the clicked point. The top-most feature (in layer stacking order) is at index 0 of the array. See the [Clicking on Map Features] example below.
# Examples
# Handling Map Clicks
In the example below map clicks are intercepted and information about the clicked feature is displayed in a data table.
# Feature Filtering
Set the filter attribute to a Flo.w reactive expression returning a boolean result to filter map features in the layer. Features will only be displayed if the expression evaluates to true. Layer filtering is fast and map updates are performed without visible flicker.
Compare this client-side filtering to the server-side filtering in this example.