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_keyenteredprop:geojson_property_keywill 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,fillColorcould 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,colorcould 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.