Any way to handle more than one multimarker area in AR.js / A-Frame?

Question

I'm trying to set-up more than one multi-marker area in AR.js with A-Frame. The idea is to have 4 pattern markers laid out as a square frame for each content. The AR.js multimarker examples make use of the learner to put the pose matrix data in the URL. Is there any way to generate different multimarker files and assign them to each a-marker? I've attached some sample code to show what I'm trying to achieve.

<a-scene>
<a-marker preset="area" id="first">
...
</a-marker>
<a-marker preset="area" id="second">
...
</a-marker>
<a-marker preset="area" id="third">
...
</a-marker>
<a-camera />
</a-scene>

Answer 1

It seems the name of the localstorage item with the configuration object is hardcoded here.

I was able to get multiple marker areas, but i had to modify the ar.js code. The result is in this glitch, the markers are in the assets.

First, I had to create and keep the multimarker configuration objects (see this SO thread, or this ar.js issue on custom area markers). Before creating the scene i set the configs:

// the name will correspond to the marker id
var oneMarker = { /* paths, pose matrices, etc. */ }
localStorage.setItem("oneMarkerFile", JSON.stringify(oneMarker));

Second - I've modified the Arjs.Anchor object - so it won't read a predefined localStorageObject:

// originally ARjsMultiMarkerFile
let markerId = markerParameters.markerName + "MarkerFile"

Third - I have to pass the markerParameters.markerName somehow. The Arjs.Anchor object is created in the arjs-anchor component init function. With one line you can set the above markerName property:

markerParameters.markerName = _this.el.id
// anywhere before instantiating the anchor (new ARjs.Anchor(arSession, markerParameters))