Start a new topic

Style the marker

 I have a hard time styling the marker any specific way. What I have is this:


this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle, 2, {
zOrder: 0,
opacity: 1.0,
});

this.titleLabel = new AR.Label(poiData.title.trunc(20), 0.6, {
zOrder: 1,
translate: {
y: 0.55
},
style: {
textColor: '#000000',
fontStyle: AR.CONST.FONT_STYLE.BOLD
}
});

this.descriptionLabel = new AR.Label(poiData.description.trunc(35), 0.6, {
zOrder: 1,
translate: {
y: -0.55
},
style: {
textColor: '#000000'
}
});


But the marker still is too big for my taste. Can I somewhere change the font size? I understand that the AR.Label takes the height as the second parameter. If I put that too low then the app would not start (I'm using Flutter).


Also: I'd like to add some extra styling, such as colors, an icon (either image or font-awesome or anything), etc. Since this is html, I guess this should be possible someway?

1 Comment

Hi, sorry for the late response.


You may have already figured it out, but you can use the scale parameter in AR.ImageDrawable and AR.Label.


These always default to 1, but you could use a smaller value. In this case, modifying the scale of markerDrawableIdle would change the size of the "container", and modifying the scale in the labels would change the text size. As an example:

this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle, 2.5, {
    zOrder: 0,
    opacity: 1.0,
    scale: {
        x: 0.8,
        y: 0.8,
        z: 0.8
    }
});

this.titleLabel = new AR.Label(poiData.title.trunc(10), 1, {
    zOrder: 1,
    translate: {
        y: 0.55
    },
    style: {
        textColor: '#FFFFFF',
        fontStyle: AR.CONST.FONT_STYLE.BOLD
    },
    scale: {
        x: 0.5,
        y: 0.5,
        z: 0.5
    }
});

this.descriptionLabel = new AR.Label(poiData.description.trunc(15), 0.8, {
    zOrder: 1,
    translate: {
        y: -0.55
    },
    style: {
        textColor: '#FFFFFF'
    },
    scale: {
        x: 0.5,
        y: 0.5,
        z: 0.5
    }
});


Please let us know if you are still having trouble.


- Damian

Login or Signup to post a comment