Placing text inside a random polygon in three.js

Question

I am trying to make a map with three.js library.

To give you an idea, there is a plane. I have divided that into several polygon shaped zones and the shape is totally random. I want to display the zone name. Now there are two problems that I want to solve:

1. It shouldn't go out of the zone Boundary(Magenta Color) and should be displayed where there is maximum free space.
2. It should avoid other objects on the plain, in this case the stations(Green Boxes)

I have tried to place the in the middle of the zone geometry, however that doesn't seem to work. Here is my code for the zones.

function DeployZone(ZoneName, coordinatesList) {
// Deploy Zone
{

    var shapePoints = coordinatesList.map(p => { return new THREE.Vector2(p.x, -p.z); });
    var shape = new THREE.Shape(shapePoints);

    var extrudeSettings = {
        steps: 0,
        depth: 0,
        bevelEnabled: false
    };

    var extrudeGeom = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
    extrudeGeom.rotateX(-Math.PI * 0.5);
    var extrudeMat = new THREE.MeshBasicMaterial({ color: 0x555555 });
    var mesh = new THREE.Mesh(extrudeGeom, extrudeMat);


    // points
    var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
    var matPoints = new THREE.PointsMaterial({ size: 0.55, color: "pink" });
    var points = new THREE.Points(geom, matPoints);


    // lines
    var matLines = new THREE.LineBasicMaterial({ color: "magenta" });
    var lines = new THREE.LineLoop(geom, matLines);


    //Group Zones
    {
        var group = new THREE.Group();

        group.add(mesh);
        group.add(points);
        group.add(lines);
        //group.visible = true;

        scene.add(group);
    }



}

//Create the name text
{
    var loader = new THREE.FontLoader();
    loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
        var xMid, text;
        var color = 0x000000;
        var matLite = new THREE.MeshBasicMaterial({
            color: color,
            transparent: true,
            opacity: 0.4,
            side: THREE.DoubleSide
        });
        var shapes = font.generateShapes(ZoneName, 4);
        var geometry = new THREE.ShapeBufferGeometry(shapes);
        text = new THREE.Mesh(geometry, matLite);
        xMid = getCenterPoint(mesh).x;
        yMid = getCenterPoint(mesh).y;
        zMid = getCenterPoint(mesh).z;
        text.scale.set(1,1,1);
        text.position.z = zMid;
        text.position.x = xMid;
        text.position.y = 0.01;
        text.rotation.x = -1.5708;
        scene.add(text);
    });
    }
    }

It would be a great help if you could guide me through this. Thank you.