Can't visualize custom markers using markerjs-live

[kdorion]

For easy repro, I forked the triangle example found on your website and added a MarkerViewer to display the custom marker. https://codesandbox.io/s/markerjs2-triangle-marker-addon-forked-izg0h4?file=/src/App.js Is there a way around this?

[ailon]

You should be able to create a custom marker for marker.js Live as well and then add it to [availableMarkerTypes](https://markerjs.com/reference/markerjs-live/classes/markerview.html#availablemarkertypes)

marker.js Live markers are basically just simplified versions of marker.js markers (minus all the editing related functionality)

[anounbobo]

I also tried to add the triangle custom marker to markerjs-live but I got an error.

I added it to the markerView with a push: this.markerView.availableMarkerTypes.push(TriangleMarker);

here is the error message: `triangleMarker.ts:48

   Uncaught TypeError: Cannot read properties of undefined (reading 'defaultColor')
at new TriangleMarker (triangleMarker.ts:48:33)
at i2.addNewMarker (MarkerView.ts:515:12)
at MarkerView.ts:493:29
at Proxy.forEach (<anonymous>)
at Proxy.i2.restoreState (MarkerView.ts:488:19)
at Proxy.i2.show (MarkerView.ts:211:10)
at Proxy.displayMarker (Schema.vue:150:21)
at Schema.vue:307:12`

[ailon]

@anounbobo in marker.js Live markers extended marker.js Live base classes which are simplified versions of marker.js 2 classes. So you'd have to remove all the editing related code from your custom marker to use with Live. Compare the code of say FrameMarker.ts here and in marker.js 2 to see what to remove.