Create pin with text

Hello!
I created new pinBuilder, but text which I want to write in the the pins looks very small.
I tried to change writeTextToCanvas.js, but it did not reach the correct proportions.
Please tell me how can I increase the text inside the pin?

Hello,

PinBuilder.fromText takes a text, color and size parameter. You can use the size parameter to make the pin bigger. Here is an example:

pinBuilder.fromText(‘this is my text’, Cesium.Color.BLACK, 48) //size = 48

``

However, if you are using a lot of text, a pin is probably not the best solution for you. It is really only ideal for a few characters.

You might want to consider using a label instead: http://localhost:8080/Apps/Sandcastle/index.html?src=Labels.html&label=Showcases

Best,

Hannah

Yes, but the text will still hold about 10 percent of the pin. And I want to increase the canvas for text.

I created a pin that looks like a flag. I need to write a small text is on the flag. The label is a good idea, but it does not suit me.

This is a my version drawPin: (in cesium/Source/Core/PinBuilder.js)
    function drawMainFlag(context2D, color, color2, size) {
        context2D.save();
        context2D.scale(size / 24, size / 24); //Added to auto-generated code to scale up to desired size.
                context2D.fillStyle = color.toCssColorString(); //Modified from auto-generated code.
        context2D.beginPath();
        context2D.moveTo(0,0);
        context2D.lineTo(24,0);
        context2D.lineTo(24,24);
        context2D.lineTo(0,24);
        context2D.closePath();
        context2D.clip();
        context2D.strokeStyle = 'rgba(0,0,0,0)';
        context2D.lineCap = 'butt';
        context2D.lineJoin = 'miter';
        context2D.miterLimit = 4;
        context2D.save();
        context2D.save();
        context2D.fillStyle = color.toCssColorString();
        context2D.strokeStyle = "#000000";
        context2D.lineWidth = 0.8460000157356262;
        context2D.lineCap = "butt";
        context2D.lineJoin = "miter";
        context2D.miterLimit = 2;
        context2D.translate(0.537864,1.39783);
        context2D.beginPath();
        context2D.moveTo(23.1652,2.88858);
        context2D.lineTo(23.2506,13.2615);
        context2D.bezierCurveTo(21.8628,12.5375,19.5891,14.9596,17.8087,14.5069);
        context2D.bezierCurveTo(16.3006,14.1236,14.6513,11.8326,13.6113,11.7512);
        context2D.bezierCurveTo(11.6024,11.5939,10.7326,11.8085,8.21161,13.0151);
        context2D.bezierCurveTo(5.32287,14.3977,4.61371,11.1122,0.119319,11.8983);
        context2D.lineTo(0,22.6886);
        context2D.lineTo(0.126983,0);
        context2D.bezierCurveTo(4.84511,1.94815,4.15795,-0.0633515,8.2095,1.61971);
        context2D.bezierCurveTo(9.08774,1.98454,11.1566,0.469138,13.7687,0.249908);
        context2D.bezierCurveTo(15.3818,0.114528,16.9351,2.66022,18.4953,3.00281);
        context2D.bezierCurveTo(20.6831,3.48321,22.688,1.48161,23.1652,2.88858);
        context2D.closePath();
        context2D.fill();
        context2D.stroke();
        context2D.restore();
        context2D.save();
        context2D.fillStyle = color2.toCssColorString(); //Modified from auto-generated code.
        // var g=context2D.createLinearGradient(0,0,5.8686131386875,4.204379562050001);
        // g.addColorStop(0,"rgba(255, 255, 255, 1.00000000000)");
        // g.addColorStop(1,"rgba(0, 255, 0, 1.00000000000)");
        // context2D.fillStyle = g;
        context2D.strokeStyle = "#000000";
        context2D.lineWidth = 1.25;
        context2D.lineCap = "square";
        context2D.lineJoin = "miter";
        context2D.miterLimit = 2;
        context2D.translate(17.562,17.3431);
        context2D.beginPath();
        context2D.moveTo(0,0);
        context2D.lineTo(5.8686131386875,0);
        context2D.quadraticCurveTo(5.8686131386875,0,5.8686131386875,0);
        context2D.lineTo(5.8686131386875,4.204379562050001);
        context2D.quadraticCurveTo(5.8686131386875,4.204379562050001,5.8686131386875,4.204379562050001);
        context2D.lineTo(0,4.204379562050001);
        context2D.quadraticCurveTo(0,4.204379562050001,0,4.204379562050001);
        context2D.lineTo(0,0);
        context2D.quadraticCurveTo(0,0,0,0);
        context2D.closePath();
        context2D.fill();
        context2D.stroke();
        context2D.restore();
        context2D.restore();
        context2D.restore();

    }