Accessing elements from code
marker.js Live exposes ways to access its internal structures for situations when you want to extend the default functionality.
Markers
The most commonly accessed element of a MarkerView object is its markers property. As the name suggests, it's an array of all markers in the annotation configuration. You can enumerate it as you would do with any array.
For example, this code will output marker types of all markers in the annotation:
markerView.markers.forEach(marker => console.log(marker.typeName));Styles
You can access each marker's container element the same way as we did output the typeName above. This means that you can change style properties on the container itself or add CSS classes to it. Keep in mind that internally marker.js Live annotations are SVG elements and while most CSS styles work the same way as they do on HTML elements, there could be some differences.
Each marker has 2 containers:
- outerContainer - is the container (
SVGGElement) created by MarkerView and guaranteed to be untouched by the core marker.js Live code. - container - is the immediate SVG group element containing the marker's visuals and can also be affected by the marker's transformations.
Generally, it's a good idea to apply custom styles to the outerContainer to avoid interference with whatever the marker could be doing internally.
marker.js Live also exposes its minimalistic CSS-in-JS implementation via the MarkerView.styles property. You can use it to add instance-aware classes and CSS rules.
For example this code from the Animate plugin sets the initial opacity of all markers to 0:
this.markerView.styles.addClass(
new StyleClass(
this.markerView.MARKER_CONTAINER_CLASS_SUFFIX,
`opacity: 0;`
)
);Then it adds animation keyframes, adds a fade-in CSS class and, finally, applies the fade-in class to all marker containers on load event.
See the source code for the Animate plugin for the actual code.
See also
- marker.js Live Class Reference.