marker.js 2 Documentation: Configure available markers

Configure available marker types

marker.js 2 comes with numerous marker types. Some of them are very common and widely used. Some are fairly niche (like Measurement Tool). Some are slightly redundant — you can achieve a simple line with an Arrow Marker with an arrow tip style set to none.

By default marker.js 2 has a subset of most commonly used markers enabled. But you can fully customize the types and order of markers shown in the toolbar.

Setting available marker types

You configure available marker types by setting the availableMarkerTypes property of the MarkerArea. This property is an array and accepts both marker type references and string equivalents of marker type names.

markerArea.availableMarkerTypes = ['FrameMarker', markerjs2.ArrowMarker];

In the code above we enable just 2 marker types. We set FrameMarker by its string name and we pass a reference to the ArrowMarker type.

Preset marker type sets

marker.js 2 comes with three presets for quick marker type configuration. Those are DEFAULT_MARKER_TYPES (used by default), ALL_MARKER_TYPES which includes all marker types and will expand as more marker types are added, and BASIC_MARKER_TYPES containing FrameMarker, FreehandMarker, ArrowMarker, TextMarker, and HighlightMarker.

You enable a marker set by just assigning it to the availabeMarkerTypes property:

markerArea.availableMarkerTypes = markerArea.ALL_MARKER_TYPES;

Combining sets and individual marker types

You can customize included marker sets by combining them with individual marker types using the JavaScript's spread syntax:

markerArea.availableMarkerTypes = [...markerArea.BASIC_MARKER_TYPES, 'CalloutMarker'];

The above example adds a Callout Marker to the basic marker set.

Overflow panel

You don't have to worry about marker buttons not fitting into the available toolbar area. In cases when there are more marker types than the allocated toolbar area can fit, marker.js 2 will automatically move the extra markers behind an overflow (...) button. Having said that, you may want to rearrange the order of your marker types so that the most relevant markers are shown first and are less likely to go into the overflow panel.