Style GeoJSON Visualization

The HERE Data Inspector Library supports the following geometry types:

• Point
• LineString
• Polygon
• MultiPoint
• MultiLineString
• MultiPolygon

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": "",          // can be applied to any geometry type. Renders a popup message when you hover a mouse pointer over a feature. If the "tooltip" property is not set, the popup is displayed with the list of all other configured "properties" for the feature.
    "style": {
        "color": "",        // can be applied to any geometry type
        "fill": "",         // can be applied to "Point/MultiPoint" with the "radius" property and "Polygon/MultiPolygon"
        "opacity": 0.5,     // can be applied to "Point/MultiPoint" with the "radius" property  in meters, "LineString/MultiLineString" and "Polygon/MultiPolygon" (only the filled part is affected, not the outline)
        "hoverColor": "",   // the color of the feature on mouse hover; can be applied to any feature
        "hoverOpacity": 0.2 // the opacity of the feature on mouse hover; can be applied to any feature except for markers and "Point/MultiPoint" with the "radius" property in pixels
    },
    "width": "7px",         // can be applied to "LineString/MultiLineString" and "Polygon/MultiPolygon" (for polygon outline); in pixels by default; for "LineString/MultiLineString" this value supports different units: "px", "m"; for example: "5px", "5m"; for polygon outlines any units are treated as pixels
    "minWidth": 3,          // for lines with width specified in meters, this property specifies a minimum width in pixels.
    "radius": "4m",         // can be applied to "Point/MultiPoint"; this value also supports these units: "px", "m"; for example "5px", "5m"; in meters by default
    "minRadius": 3,         // for "Point/MultiPoint" objects with the "radius" specified in meters, this property specifies a minimum radius in pixels
    "protobufRef": ""       // specifies a link to the original raw data property that this feature visualizes; for example, "prop.someArray[34].prop2"; can be applied to any feature
    "marker-image": "",     // an image for a marker that can be a data URL or a web URL; can be applied to "Point/MultiPoint" without the "radius" property
    "featureTags": ["tag"], // an array of string tags that are used for hierarchical filtering; featureTags values can have a pipe (|) inside thus making groups on different levels; for example, "group_1|group_2|group_3" will result in a three-level deep tree.
}

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": "",            // simple tooltip title; HTML markup is not allowed and is removed before being displayed; can be applied to any geometry type
    "description": "",      // simple tooltip description; HTML markup is not allowed and is removed before being displayed; can be applied to any geometry type
    "marker-symbol": "",    // a short name for a marker image that maps to an image from a name-map of images defined in the "marker-symbol-images" property of a "FeatureCollection"; can be applied to "Point/MultiPoint" without the "radius" property
    "marker-size": "",      // possible values: "small", "medium", "large"; can be applied to "Point/MultiPoint" without the "radius" property
    "marker-color": "",     // the same as "properties.style.color", but for "Point/MultiPoint" only
    "stroke": "",           // the same as "properties.style.color", but for "LineString/MultiLineString" and "Polygon/MultiPolygon" (for polygon outline) only
    "stroke-opacity": 1.0,  // the same as "properties.style.opacity"; can be also applied to "Polygon/MultiPolygon" to set the opacity of the polygon outline
    "stroke-width": 1.0,    // the same as "properties.width"
    "fill": "",             // the same as "properties.style.fill"
    "fill-opacity": 1.0     // the same as "properties.style.opacity"
}

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 MultiPoints) 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": [116.5, 40.2]
    }
  }
  

• 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": [116.9, 40.1]
    }
  }
  

• 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": [116.9, 40.1]
    }
  }
  

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "marker-symbol": "img"
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [116.4, 39.9],
                    [116.5, 39.6]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "marker-symbol": "logo"
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [115.9, 39.95],
                    [115.7, 39.7]
                ]
            }
        }
    ],
    "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%.

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.