Style GeoJSON Visualization

The HERE Open Location Platform (OLP) 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
}

MapBox Styles

The GeoJsonDataSource also supports MapBox Styles Specification v1.1.0.

Given below is an example of supported MapBox style attributes:

"properties": {
    "title": "",            // simple tooltip title; any HTML markup is not allowed and is removed before being displayed; can be applied to any geometry type
    "description": "",      // simple tooltip description; any 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 styles, if specified, have a higher priority than the tooltip, style, width, or radius properties.

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]
      }
    }
    

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": [
                    [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%.

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.

For a working example of how you can integrate SVG icons into your visualization with custom rendering plugins, see the geojson / DI / icons sample app in the Data Inspector Library examples:

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 renderer 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.

results matching ""

    No results matching ""