(thisArea) => {
          let tempCoords = thisArea.coords;

          if (thisArea.coords.length == 4) {
            tempCoords = [ // in case of rectangle (only 2 coords)
              thisArea.coords[0], thisArea.coords[1],
              thisArea.coords[2], thisArea.coords[1],
              thisArea.coords[2], thisArea.coords[3],
              thisArea.coords[0], thisArea.coords[3],
            ];
          }

          let coordsString = '';

          for (var i = 0; i < tempCoords.length; i = i+2) {
            coordsString += tempCoords[i]+','+tempCoords[i+1]+' ';
          }

          let svgColor = '#ffffff';
          let svgOpacity = '0.2';
          if (thisArea.flat.flatStatus == 2) {
            svgColor = '#dfb452';
            svgOpacity = '0.5';
          } else if (thisArea.flat.flatStatus == 3) {
            svgColor = '#ff0000';
            svgOpacity = '0.4';
          }

          return (
            <svg height="619" width="1024">
              <polygon points={coordsString} style={{
                'fill': svgColor,
                'fill-opacity': svgOpacity,
                'stroke': '#ffffff',
                'stroke-width': 0,
                'height': "100%",
                'width': "100%",
                'viewBox': "0 0 100 100",
                'preserveAspectRatio': "none"
              }} />
            </svg>
          );
        }