Untitled

const features = [{
        type: 'Feature',
        properties: {
            'fill-color': '#52b874',
            'fill-outline-color': '#000',
            'fill-opacity': 0.75
        },
        geometry: {
            coordinates: [
                [
                    [11065, 3846],
                    [11048, 3848],
                    [11043, 3802],
                    [11055, 3801],
                    [11070, 3799],
                    [11077, 3798],
                    [11099, 3786],
                    [11142, 3766],
                    [11184, 3791],
                    [11187, 3830],
                    [11148, 3857],
                    [11106, 3851]
                ]
            ],
            type: 'Polygon'
        }
    },
    {
        type: 'Feature',
        properties: {
            'fill-color': '#e6324b',
            'fill-outline-color': '#121212',
            'circle-stroke-width': 1,
            'circle-radius': 10,
            'fill-opacity': 1,
            title: '<div style="font-size: 13px">Name: <span style="color: #69ff87; font-weight: 700">Avarice</span><br>Level: <span style="color: #69ff87; font-weight: 700">70</span><br><span style="color: #cfcfcf">x: 11145, y: 3814, z: 170</span></div>',
            z: 170
        },
        geometry: {
            type: 'Point',
            coordinates: [11145, 3814, 170]
        }
    }
];

map.addSource('data-layer', {
    type: 'geojson',
    data: {
        type: 'FeatureCollection',
        features: features
    }
});

map.addLayer({
    id: 'data-layer-polygon',
    type: 'fill',
    source: 'data-layer',
    paint: {
        'fill-color': '#888888',
        'fill-opacity': 0.4
    },
    filter: ['==', '$type', 'Polygon'],
    layout: {},
});