Style GeoJSON Visualization
The HERE Data Inspector Library supports the following geometry types:
Geometric objects with additional properties are Feature
objects. Sets of features are contained by FeatureCollection
objects. To customize the visual appearance of GeoJSON data, you can add the following custom properties to a Feature
object:
"properties": {
"tooltip": "",
"style": {
"color": "",
"fill": "",
"opacity": 0.5,
"hoverColor": "",
"hoverOpacity": 0.2
},
"width": "7px",
"minWidth": 3,
"radius": "4m",
"minRadius": 3,
"protobufRef": ""
"marker-image": "",
"featureTags": ["tag"],
}
Mapbox Simple Style
The GeoJsonDataSource
also supports Mapbox Simple Style Specification v1.1.0.
Given below is an example of supported Simple Style attributes:
"properties": {
"title": "",
"description": "",
"marker-symbol": "",
"marker-size": "",
"marker-color": "",
"stroke": "",
"stroke-opacity": 1.0,
"stroke-width": 1.0,
"fill": "",
"fill-opacity": 1.0
}
Note that Mapbox Simple Style properties, if specified, have a higher priority than the tooltip
, style
, width
, or radius
properties.
Usage of properties.description
By default, all properties
of a feature are displayed in an InfoPanel
widget on click. You can override this behavior with the properties.description
property that accepts a string or an object. In this case, only those items are displayed that you specify in properties.description
while other feature properties are ignored.
If you assign a string value to description
, you can use these HTML tags to customize you view:
allowedTags: [
"abbr", "address", "article", "aside", "b", "bdi", "bdo", "blockquote", "br",
"caption", "cite", "code", "col", "colgroup", "data", "dd", "del", "details",
"dfn", "div", "dl", "dt", "em", "footer", "h3", "h4", "h5", "h6", "head",
"header", "hr", "i", "kbd", "label", "legend", "li", "main", "mark", "meter",
"nav", "ol", "p", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp",
"section", "small", "span", "strike", "strong", "sub", "summary", "sup",
"table", "tbody", "td", "tfoot", "th", "thead", "time", "title", "tr", "u",
"ul", "var", "wbr"
]
If you assign an object to description
, its properties are automatically arranged in a table in the Info Panel and are displayed as follows:
- HTML code in a property of type
string
is displayed in raw form - Properties of type
object
are automatically converted to a string
For an example that shows how to implement properties.description
, see Add Tooltips and Styles.
Feature Property Inheritance
When you define a property for a MultiPoint
, MultiLineString
, or MultiPolygon
, each point, linestring, or polygon inherits the properties of its container feature. For example, suppose you attach a custom SVG icon to a MultiPoint
geometry. As a result, the same icon is visualized for all the points in this array. Besides, if your select one of these points, all the points defined in this MultiPoint
geometry get selected as well.
If you want a specific point to be highlighted or selected separately, split the container MultiPoint
to independentPoints
(or just smaller sets of MultiPoint
s) and assign individual attributes to each of those Point
's. The same applies to linestrings and polygons.
Adding Custom Icons to Geometry Features
You can define custom icons for Point/MultiPoint
features. The marker-image
property accepts a valid data URL, making it possible to display the following:
-
Base64-encoded PNG images:
{
"type": "Feature",
"properties": {
"marker-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABFZJREFUWAntWEtonFUUvuefTp0ZpZLRtD5ADDFNZobmNY80CFXa4kK60VJQCkp1UReiKOJGaEvBhaClUES6UEHdia50JdRGbSEzSepkTGYkLQEVbCkmtLXtJJP5j+ek/uW+/tvpqAtLZ3PP4zvnfvfc/557GSFu//5nFYB2+PafLq/HpXqVYpNGPMCSF/G2l3tzPxi+FgxeCxgDAo36EBlNMoxEvMNvNh81glo0tEUIEbpd+UG4/a7YtgiBwEdcSalKbr8jOJTQQLX49GCtZJS+/2z5Tl/AZkdOdmXy88X7dEz254m+gVpxzy7EiO4LdOtHvWm2uIVWOcYgAJgBwKN+Iv5Z5Gr9Sd/HdxDFg0GC0BHEJfK9nYgmP7iysrADEPYi4hbGe554pZwaOWKLNQgdQPS+nC1NosBBOQBANIlI6MpkrCID+LQ4fScW457oKaZG/lCwpOhA8UWt9KJOhoPaInMt0JiDzB11hIPs1n9KhbJnJu5uLPlzVNpOHfhv66sVh8hQJZWryLkV9st13HezZOiIX6HvbIqSLsqJbyRzxcFvHtZxCiEh/N06wKFX6Yt/rDedXzedLmQrmZHkmrXRDJX8mCNGcaEQW/XTqBACsWYXTfK7EmVReNJ7EuuHK+nCd58DNAPIqZ7h2XK6sN0DeD+whY1cWQ+850pdhbMyRiE0ncl+H4uLYSI1JoMUGcTFaCyy53hXV12x/63Q9mFHvPMNahg1m59t9P3MoedtLqfzn+oYhRA7mXFfKr9NgPhaB7NO/eSrye7cLzZfYGOyROyjQJdHJhOPJnP6xxxgDELs4G3wEM4HIHlEgAlZD5PBC8EhXB7v6bkYFmclxGCfWk9Y0D+y00XoircSyuJElPbGej0AYs6VMPChb8fRcV83+uuM/elCwQahodrUA8tVf4zW8USQXB4RcAc10Idkmy4/Pj8fo372gm6/pmP35Ut/Tg7MlPhNZfwUQnyprjQbU3RPjBrIwEArbNSbH/OkgUkeiQgsXj3/Lu14n2yXZarSwz74J/ur48/LdpaVq2PTzDj3hA06KETnxvgSncgTQS8amptKN5cbR7jhhcQY5lgC7pd7kUao9B59zq8bUQ4DNzhaVo0q00WwDgfUcNHkx6YzI9tkh7Jla2NwkPqH9bjLQbJML4MEkRkm282RoeeMAO9VORfLCiFqeBcQxFs66L/R4eh0Ov+TnlshxM6dffkPqUqndCCVd0W3taKHxC3GAPfZ4g1CB1ZfeJHrpSRyFSrty3R/3QvgPUsT/GZLZNjoCUv4N5Odd3XQZfsMHYDjAYaesPttr0X2U377b2B2/Ckic+7HVOGkjOBHPi4sfeNsDUKco9MzKJ8ezsGP/BX0Rzf25j8JTqacm+VQQjpQ1onsIR/Fa7JNlinpt3R6tsq2VmVjy1oJRAGnnTi4gd8R3BYhevKcceSkW8ftd8W2RQijMT6FC9bEq382RE5YfbeNt2IF/gJLU1/JY8fCWAAAAABJRU5ErkJggg=="
},
"geometry": {
"type": "Point",
"coordinates": [13.382, 52.517]
}
}
-
SVGs:
{
"type": "Feature",
"properties": {
"marker-image": "data:image/svg+xml;utf8,<svg width='128' height='128' viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg'><g style='fill:rgb(217, 217, 242); stroke:rgba(198, 203, 221, 0.5)' transform='translate(0,5)'><path d='M 5,7 C 4.5,4.5 7.5,1.5 10,3 c 5.5,-5 13,-1.5 12.5,5 4,2 3.5,7.5 -0,7.5 -6,0 -10.5,0 -18.5,0 -5,-0 -4.5,-8.5 1,-8.5 z'/></g></svg>"
},
"geometry": {
"type": "Point",
"coordinates": [13.38, 52.517]
}
}
-
External images:
{
"type": "Feature",
"properties": {
"marker-image": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/HERE_logo.svg/180px-HERE_logo.svg.png"
},
"geometry": {
"type": "Point",
"coordinates": [13.383, 52.517]
}
}
Note
Images can also be referenced by name that allows reducing the overall GeoJSON size. The marker-symbol
property can be used to specify the name of an image from the name-image map. You must place the name-image map in the root object of the GeoJSON data (FeatureCollection
):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"marker-symbol": "img"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[12.85, 52.55],
[12.9, 52.3]
]
}
},
{
"type": "Feature",
"properties": {
"marker-symbol": "logo"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[13.3, 52.35],
[13.4, 52.5]
]
}
}
],
"marker-symbol-images": {
"img": "data:image/svg+xml;utf8,<svg width='128' height='128' viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg'><g style='fill:rgb(217, 217, 242); stroke:rgba(198, 203, 221, 0.5)' transform='translate(0,5)'><path d='M 5,7 C 4.5,4.5 7.5,1.5 10,3 c 5.5,-5 13,-1.5 12.5,5 4,2 3.5,7.5 -0,7.5 -6,0 -10.5,0 -18.5,0 -5,-0 -4.5,-8.5 1,-8.5 z'/></g></svg>",
"logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/HERE_logo.svg/180px-HERE_logo.svg.png"
}
}
If both marker-image
and marker-symbol
are defined, only marker-image
is employed. This is useful for cases when the default image, defined by the symbol name, must be overriden for specific features .
A Point
feature with a custom image, similar to simple markers (see the chapter below), supports custom hover colors. A hover color is applied to the image, where 70% is the user-defined hover color and 30% is the image itself. The same is true for selection colors that cannot be customized. The #FCDB7F
(salomie) color is applied to an image with the same percentage distribution – 70% by 30%.
Note
Hash (#
) symbols in the data URL of an SVG (for example, for colors #ffffff
) might be incorrectly interpreted, and it is recommended to escape them. The image defined for a marker symbol can be a data URL or a web URL. Marker symbols with the __
prefix are reserved for internal implementations and must not be used.
Highlighting Effects for Geometry Features
Depending on the type of a Feature
object, the Data Inspector Library offers different effects for default and selected states of objects with hover variants. You can customize the way your GeoJSON data is highlighted in your custom rendering plugin code.
To view how GeoJSON styling works for default and selected states of lines, run the interactive / DI / full
example application.
Polygons
Depending on a Polygon
's state, the following styling applies:
- Default:
#1EE0FF
(1px stroke at 100% and fill at 20% opacity) - Selected:
#FCDB7F
(1px stroke at 100% and fill at 40% opacity)
Both states have their hover variants where +20% opacity is added to fill and stroke colors.
You can customize default state colors including the opacity for the default state. You are advised that the opacity stays at 20% to allow stacking of up to 4 Polygons
. This does not include, though, the opacity increase for the selected state (as 20% are always added).
The selected state is not customizable. Mind that #FCDB7F
is reserved and using it for the default state might make the data inspection experience confusing.
You can also customize a Polygon
's stroke width. The supported units are pixels and meters.
Lines
Depending on a Line
's state, the following styling applies:
- Default:
#1EE0FF
(2px stroke width) - Selected:
#FCDB7F
(2px stroke width)
Both states have their hover variants where stroke width is increased to 200% and 20% of opacity is added.
You can customize default state colors including the opacity for the default state.
Selected state colors cannot be customized. Note that #FCDB7F
is reserved and using it for the default state might make the experience confusing.
You can also customize a Line
's stroke width. The supported units are pixels and meters. If the measurement units are not defined, then the value is treated as the value in pixels.
The minimal rendered size of a line is 1px.
Points without Radius
Depending on a Point
's state, the following styling applies:
- Default:
#1EE0FF
- Selected:
#FCDB7F
You can customize a Point
's hover color. Hovered marker is scaled to 150% and is always opaque.
You cannot customize selected state colors of a Point
.
Points with Radius:N (Where N > 0)
Depending on a Points
's state, the following styling applies:
- Default:
#1EE0FF
(1px stroke at 100% and fill at 20% opacity) - Selected:
#FCDB7F
(1px stroke at 100% and fill at 40% opacity)
Both states have their hover variants where +20% opacity is added to fill and stroke colors.
You can customize default state colors including the opacity for the default state. But you are recommended that it stays at 20% to allow stacking of up to 4 Polygons
. This does not include the opacity increase for the selected state (20% is always added).
The selected state cannot be customized. Note that #FCDB7F
is reserved and using it for the default state might make the data inspection experience confusing.
The radius
supports values in pixels. If the measurement units are not defined, then the value is treated as the value in meters.
The minimum rendered size of a Point
with radius in meters is 12px. If a radius is equal or less than 12px, the fill opacity is increased to 100%, and on hover the size is increased to 150%.
The size ofPoints
with radius in pixels is increased to 150% on hover. It is always opaque.