Vector Styling
There are two main ways to style a GeoJSON Vector Layer:
- Changing a Vector Layer’s configuration style fields
- Adding a style object into a feature’s
"properties"
object inside a GeoJSON file.
The priorities of stylings are as follows (from highest to lowest):
- Vector Layer configuration style fields with
prop:geojson_property_key
enteredprop:geojson_property_key
will set the feature’s color to the values offeatures[i].properties.geojson_property_key
-
Style Object per feature Example:
"properties": { "style": { "fillColor": "#b3b300", "fillOpacity": 1, "color": "black", "opacity": 1, "weight": 2, "radius": 10, "dashArray": "20", "lineCap": "square", "lineJoin": "miter", "noclick": true, "nointeraction": true, "minZoom": 10, "maxZoom": 17 } }
All are optional, including the
"style"
object entirely.fillColor
: The internal color of the feature.fillOpacity
: The opacity of thefillColor
. Alternatively,fillColor
could hold a color with alpha itself such asrgba(255,0,0,0.5)
orhsl(170, 80%, 50%, 0.1)
.color
: The color of the stroke/border of the feature. If the feature is a line, this is its main color.opacity
: The opacity of the stroke/border. If the feature is a line, this is its main opacity. Alternatively,color
could hold a color with alpha itself such asrgba(255,0,0,0.5)
orhsl(170, 80%, 50%, 0.1)
.weight
: The thickness in pixels of the stroke/border.radius
: If the feature type is a point, the radius in pixels of that point.dashArray
: A dashed border. See stroke-dasharray.lineCap
: How to cap off the ends of lines. See stroke-linecap.lineJoin
: How to join line segments. See stroke-linejoin.noclick
: True sets the feature to be unclickable.nointeraction
: True sets the feature to have no interactions (no click, no hover, can click through).minZoom
: Minimum zoom to render this feature. Overrides the layer’s overallminZoom
(and legeacyvisibilityCutoff
).maxZoom
: Maximum zoom to render this feature. Overrides the layer’s overallmaxZoom
(and legeacyvisibilityCutoff
).
- Vector Layer configuration style fields (non-
prop:geojson_property_key
)- A named color
- crimson, blue, rebeccapurple
- A hex color
- #FFF, #A58101
- An rgb color
- rgb(255,89,45)
- An hsl color
- hsl(130, 26%, 34%)
- See CSS colors for a complete list.
- A named color
- A default black or blue.