Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@here/harp-datasource-protocol
Advanced tools
Readme
The DataSource Protocol package contains components used for the decoding and styling of data that is used by the Datasources. This code is shared between the ui-thread and the web-workers which are used to parallelise the decoding of the data.
This module contains interfaces for choosing techniques form the techniques catalog that are applied via the theme files to draw geometries on the map canvas.
The supported techniques that can be used to draw on the map are:
All the techniques are documented in the Techniques
class' source code.
To set a technique in a theme file, you can use a technique
property. See examples below.
Techniques can be used to render map objects on the canvas in a certain way. The visual attributes of these techniques are defined and placed in the theme file.
The theme JSON file enables writing conditions which the data received from the datasource must match for a style to be applied to it. When a condition is met a set of attributes are applied to the map object is changed according to a set of predefined attributes. There is an example of a minimal theme file below. It styles the names of continents and draws a line around islands, archipelagos, cliffs and bridges.
The theme file enables to define multiple styles
which are bound to the data format received from
a datasource (for example a tilezen based one, check here for more information on tilezen vector tile datasource).
{
"styles": [
{
"styleSet": "tilezen",
"layer": "earth",
"when": "kind in ['continent']",
"technique": "text",
"priority": ["step", ["zoom"], 0,
2, 120,
3, 100,
4, 60
],
"color": "#E48892",
"fontVariant": "AllCaps",
"opacity": 0.6
},
{
"styleSet": "tilezen",
"layer": "earth",
"when": ["match", ["get", "kind"],
["archipelago", "cliff", "ridge", "island"], true,
false
],
"technique": "line",
"color": "#C1BDB3"
}
]
The conditions can be based on the datasource metadata
(for example data layer like water or buildings or a specific flag like isBridge
).
An example theme file used in harp-examples could be found in the berlin_tilezen_base.json. Theme file is closely connected with the type of data received from the datasource.
"technique"
- determines which technique should be applied to objects fulfilling the condition
{
"styleSet": "tilezen",
"description": "Exemplary theme condition",
"when": ["any",
["==", ["get", "kind_detail"], "pier"],
["==", ["get", "landuse_kind"], "pier"],
],
"technique": "solid-line",
"color": "#00f",
"lineWidth": ["interpolate", ["linear"], ["zoom"],
13, "1.5px",
14, "1.2px",
15, "0.9px"
]
}
In the above example there is a condition used within the theme which is applying a solid-line
technique to a map feature which has a kind_detail
or landuse_kind
property equal to pier. The
line is rendered with different line widths depending on the current map zoom level.
Note that the typical logical operators like:
all
for computing the conjunction of sub-conditionsany
for computing the alternative of sub-conditions"when"
- is a property that holds a description of the condition. This condition queries the
feature data which and uses one or many of the following operators:
~=
(tilde equal), returns true when the value on the left contains the value on the
right, for example: "when": ["~=", ["get", "kind_detail"], "park"]
this condition would match kind_detail
s like national_park, natural_park, theme_park but
also parking
^=
(caret equal), returns true when the value on the left starts with the value on the
right, for example: "when": ["^=", ["get", "kind_detail"], "water"]
the above condition would match kind_detail
s like: water_park, water_slide or
water_works but not drinking_water
$=
(dollar equal), returns true when the value on the left ends with the value on the
right, for example: "when": ["$=", ["get", "kind_detail"], "water"]
the above condition would match kind_detail
s like: drinking_water but not water_park
==
(equal equal), returns true when the value on the left is equal to the value on the
right, for example: "layer": "roads",
"when": ["==", ["get", "kind"], "rail"],
the above condition would match roads $layer
and the kind
of rail
!=
(exclamation mark equal), returns true when the value on the left is not equal to the
value on the right, for example: "description": "All land roads except rail",
"layer": "roads",
"when": ["!=", ["get", "kind"], "rail"],
the above condition would match all kind
s which are not rail on the roads $layer
For more in-depth details about the equality operators check the @here/harp-datasource-protocol/lib/Theme.ts.
Additionally there are two more operators available (has
and in
):
has(
variable name)
returns true when the feature contains the specified variable and it
is not undefined, for example: "description": "lakes (on high zoom level show only biggest lakes)",
"when": ["any",
["==", ["get", "kind"] "lake"],
["has", "area"],
]
the above condition would match all kind
s which have the value lake or the area property
defined.
in[
array of possible values]
returns true when the feature contains one of the values
specified in the array, for example:{
"description": "Earth layer",
"layer": "earth",
"styleset": "tilezen",
"when": ["in", ["get", "kind"],
["literal", ["archipelago",
"cliff",
"island"]]
],
(...)
}
the above conditions would match all features from earth
layer which kind
is equal either to
'archipelago', 'cliff' or 'island'.
A style for a certain feature (map object) on the map is kept in the attr
object. Here is an
example:
"color": "#E48892",
"fontVariant": "AllCaps",
"opacity": 0.6,
"priority": ["step", ["zoom"], 0,
2, 120,
3, 100,
4, 60
]
A list of possible style modifier for each techniques can be found in the Techniques
class' source code.
Most common properties include:
priority
: Sets a priority
of a map object, defaults to 0
. Objects with highest priority get
placed first. Can be defined to vary depending on the zoom level with some default value. (see the
example above).
renderOrder
: which enables to define the render order of the objects created using a particular
technique.
color
: color in hexadecimal or CSS-style notation, for example: "#e4e9ec"
, "#fff"
,
"rgb(255, 0, 0)"
, "rgba(127, 127, 127, 1.0)"
, or "hsl(35, 11%, 88%)"
.
FAQs
Components used for the decoding and styling of data that is used by the Datasources.
The npm package @here/harp-datasource-protocol receives a total of 36 weekly downloads. As such, @here/harp-datasource-protocol popularity was classified as not popular.
We found that @here/harp-datasource-protocol demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.